logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 06-19-2017, 03:39 PM   #1
Justintime9
 
Join Date: Jun 2017
Posts: 4
Default Desktop View Header Problems

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.





Here's my HTML:

HTML Code:
<!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

HTML Code:
@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;
	}

}

Last edited by Justintime9; 06-19-2017 at 03:43 PM..
Justintime9 is offline   Reply With Quote
Old 06-20-2017, 12:49 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

margin: 10px;
margin-left: auto;
margin-right: auto;

lose the auto margin
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 06-25-2017, 07:20 PM   #3
Justintime9
 
Join Date: Jun 2017
Posts: 4
Default

You mean delete "margin-left" and "margin-right" so it just says "margin: 10px"? That doesn't change anything.
Justintime9 is offline   Reply With Quote
Old 06-25-2017, 09:19 PM   #4
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

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
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 06-25-2017, 10:53 PM   #5
Justintime9
 
Join Date: Jun 2017
Posts: 4
Default

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?
Justintime9 is offline   Reply With Quote
Old 06-26-2017, 03:07 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

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
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 06-26-2017, 04:36 PM   #7
Justintime9
 
Join Date: Jun 2017
Posts: 4
Default

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.
Justintime9 is offline   Reply With Quote
Old 06-28-2017, 06:25 AM   #8
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

there you go. good one
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 04:19 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com