Jump to content


Photo

div alignment


  • Please log in to reply
3 replies to this topic

#1 Destramic

Destramic

    Advanced Member

  • Members
  • PipPipPip
  • 550 posts

Posted 19 August 2014 - 02:45 PM

hey guys im having a problem aligning a div so its vertically aligned middle...the objects im having the difficulty with is "search-bar" and "quick-links" which are apart of the "search_bar_container"...i;ve been fiddling about with it but have had no luck...css isn't really my thing so any pointer will be greatly appreciated

 

thank you

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script>
$(document).ready(function() 
{
	$("#list-icon").click(function() 
	{
		if ($('#top-bar-media-menu').is(":visible"))
		{
			$('#top-bar-media-menu').hide("fast");
		}
		else
		{
			$('#top-bar-media-menu').show("fast");
			$('#top-bar-media-menu').focus();
		}
	});
});
</script>
<style>
body
{
	margin: 0px;
}

div#top-bar-media-menu
{
	display: none;
}


div#header #left-link
{
	display: inline-block; 
	vertical-align: middle;	
	padding: 5px;
}

div#header #right-link
{
	float: right;
	line-height: 45px;
	padding-right: 10px;
}

div#header #list-icon
{
	background-image: url('list.png'); 
	vertical-align: middle;
	display: inline-block;
	height: 48px; 
	width: 48px;
}

div#header #home-icon
{
	background-image: url('home.png'); 
	background-color: #505050;
	vertical-align: middle;
	display: inline-block;
	height: 48px; 
	width: 48px;
}

div#header #arrow-down
{
	background-image: url('arrow_down.png'); 
	vertical-align: middle;
	display: inline-block;
	height: 16px; 
	width: 16px;
}

div#header #top-bar-container
{
	background-color: #000000;
	width: 100%;
	border-radius: 3px;
	position:relative
}

div#header #top-bar-desktop
{
	background: -moz-linear-gradient(top, #505050, #343434);
	border: 1px solid #080808;
	width: 85%;
	height: 48px;
	margin-left: auto;
    margin-right: auto;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	vertical-align: middle;
	
}

div#header #top-bar-media
{
    display: none;
}

div#search_bar_container
{
	width: 85%;
	height:80px;
	margin-left: auto;
    margin-right: auto;
	position:relative;
}

div#search_bar_container #logo
{
	display: inline-block;
    background-image: url('logo.png'); 
	height: 80px; 
	width: 220px;
}

div#search_bar_container #search-bar
{
	line-height: 45px;
	display: inline-block;
	position:absolute;
	width: 50%;
	height: 40px;
}

input#search
{
	
	position: relative;
	width: 40%;
	border: 1px solid #080808;
	height: 30px;
	border-radius: 20px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 14px;
	color: #000000;
	vertical-align: middle;
}

div#search_bar_container #quick-links
{
	display: inline-block;
	vertical-align: middle;

}

@media all and (max-width:500px)
{
	div#header #top-bar-desktop
	{
		display: none;
	}
	
	div#header #top-bar-media
	{
		display: block;
		background: -moz-linear-gradient(top, #505050, #343434);
		border: 1px solid #080808;
		width: 85%;
		height: 45px;
		margin-left: auto;
	    margin-right: auto;
		border-top-right-radius: 3px;
		border-bottom-right-radius: 3px;
		font-family: Verdana,Arial,sans-serif;
		font-size: 11px;
		color: #FFFFFF;
	}
}

</style>
</head>
<body>
<div id='header'>
	<div id='top-bar-container'>
		<div id='top-bar-media'>
			<div id="list-icon"></div>
		</div>
		<div id='top-bar-desktop'>
			<div id='home-icon'></div>
			<span id='left-link'>Register / Login</span>
			<span id='left-link'>News</span>
			<span id='left-link'>My Account</span>
			<div id='arrow-down'></div>
			<span id='right-link'>Language</span>
		</div>
	</div>
	<div id='search_bar_container'>
		<div id='logo'></div>
		<div id='search-bar'><input id='search' type='text'/></div>
		<div id='quick-links'>quick links here<div>
	</div>
</div>

<div id='top-bar-media-menu'>menu here</div>
</body>
</html>


#2 CroNiX

CroNiX

    Advanced Member

  • Gurus
  • 874 posts
  • LocationPortland, OR

Posted 19 August 2014 - 03:55 PM

If you use text-align: center on the parent div that should help. You already have display:inline-block on the child elements so that's correct.

One problem is the image also takes up space (it's also a child of the container), and your search bar is using 50% width, so those will affect the outcome.



#3 CroNiX

CroNiX

    Advanced Member

  • Gurus
  • 874 posts
  • LocationPortland, OR

Posted 19 August 2014 - 04:16 PM

The 50% width of the search bar is taking 50% of the parent container, which will force some other child objects onto the next "line" unless the others can all fit within the remaining 50%. If you want to use %'s for the children, then they all need to total to 100% or just below that, which is hard to do when you mix %'s and px's.



#4 Digitizer

Digitizer

    Advanced Member

  • Members
  • PipPipPip
  • 45 posts
  • LocationBarcelona
  • Age:29

Posted 24 August 2014 - 08:59 AM

Try to change your code as this and see if this is what you wanted

div#search_bar_container
{
	width: 85%;
	height:80px;
	margin-left: auto;
        margin-right: auto;
	position:relative;
	float: left;
	padding: 10px;
	clear: both; /* So The parent div after this div will come into next line */
}

div#search_bar_container #logo
{
	float: left;
        background-image: url('logo.png'); 
	height: 80px; 
	width: 220px;
}

div#search_bar_container #search-bar
{
	float: left;
	width: 50%;
	margin-top: 25px; /* Adjust this height to your need*/
}

input#search
{
	
	position: relative;
	width: 40%;
	border: 1px solid #080808;
	height: 30px;
	border-radius: 20px;
	font-family: Verdana,Arial,sans-serif;
	font-size: 14px;
	color: #000;
	vertical-align: middle;
	padding-left: 10px; /* Added this one so text will actually look inside */
}

div#search_bar_container #quick-links
{
	float: right;
	margin-top: 25px; /* Adjust this height to your need*/
	font: normal 8pt 'Verdana',Arial,sans-serif;
	color: #000;

}

and @Cornix is right, you should use "percentage" for container sizing rather than hard coded PXs.  Random users always have difference resolutions on their screens and your page might not look good .. e-g a 1920px widescreen, where it will land your page?


Edited by Digitizer, 24 August 2014 - 09:03 AM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com