PDA

View Full Version : Desktop View Header Problems


Justintime9
06-19-2017, 03:39 PM
I'm having a bit of a problem getting my logo and navigation to line up perfectly. Meaning, even though the logo floats to the left, and the navigation floats to the right, they refuse to line up horizontally.

https://2.bp.blogspot.com/-OuVxAYRNb2c/WUfw7LMMgUI/AAAAAAAAArk/pEO24WMOU4cl2SOhyO-bRaRal2ynGNVQgCLcBGAs/s1600/NavProblem.jpg

https://4.bp.blogspot.com/-bfJBSEggFmQ/WUfw6wnGZfI/AAAAAAAAArg/WUWTgkoNvPwz9TPUa5o5P2zvbu4axRKagCLcBGAs/s1600/NavProblem_red.jpg

Here's my HTML:

<!doctype html>
<html>
<head>
<link rel="icon" href="images/favicon.ico">
<meta charset="utf-8">
<title>Justin Grajek.com</title>
<link rel="stylesheet" href="styles.css">
</head>

<body>

<header>
<img class="style-logo" src="images/LOGO_transp.png" width="350" height="54" alt="Justin Grajek Logo">
<nav class="style-nav">
<ul>
<li><a href="#"><img src="images/HOME.png" width="70" height="20"></a></li>
<li><a href="#"><img src="images/PORTFOLIO.png" width="131" height="20"></a></li>
<li><a href="#"><img src="images/RESUME.png" width="99 " height="20"></a></li>
<li><a href="#"><img src="images/CONTACT.png" width="113" height="20"></a></li>
</ul>
</nav>

<img class="style-pic" src="images/Pen_is_mightier.jpg" alt="The pen is mightier than the sword picture">
</header>

<main></main>

<footer></footer>

</body>
</html>


And here's my CSS

@charset "utf-8";
/* CSS Document */

html,
html * {
padding: 0px;
margin: 0;
box-sizing: border-box;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

header {
padding: 0px;
}

.style-logo {
margin: 10px;
margin-left: auto;
margin-right: auto;
display: block;
background-color: #FFFFFF;
}

.style-nav ul {
list-style-type: none;
}

.style-nav ul li a {
text-decoration: none;
color: #000000;
text-align: center;
display: block;
text-transform: uppercase;
padding: 8px;
}

.style-pic {
margin-left: auto;
margin-right: auto;
display: block;
align-content: center;
}

/*Tablet View*/


@media (min-width: 768px){

.style-nav ul li {
display: inline-block;
}

.style-nav ul {
text-align: center;
}
} /*Desktop View*/


@media (min-width: 1024px){

.style-logo {
float: left;
}

.style-nav {
float: right;
}

}

edbr
06-20-2017, 12:49 AM
margin: 10px;
margin-left: auto;
margin-right: auto;

lose the auto margin

Justintime9
06-25-2017, 07:20 PM
You mean delete "margin-left" and "margin-right" so it just says "margin: 10px"? That doesn't change anything.

edbr
06-25-2017, 09:19 PM
ok i didnt look to well just saw the conflict. are the elements position relative?I only have my handphone so not real easy to look

Justintime9
06-25-2017, 10:53 PM
Position isn't even on there. Do you mean for style-nav? Or style-logo? (Or both?) The site is responsive, so there's tablet view and mobile view, both of which the text is centered.

So the only one with this problem is desktop view. The trick is to not mess up the other views when fixing desktop view. Perhaps it needs to be changed withing the desktop view media query?

edbr
06-26-2017, 03:07 AM
as i said hard for me to check but yes add position relative to both and see , they should float left and right on the same line providing the widths allow

Justintime9
06-26-2017, 04:36 PM
Figured it out! ".style-logo" had "margin: 10px," but ".style-nav" didn't have any margin. I just made in "margin: 20px" and it lined up perfectly.

edbr
06-28-2017, 06:25 AM
there you go. good one