Jump to content

div alignment

Destramic

By Destramic
in CSS Help

 Share

Recommended Posts

Destramic Advanced Member

Destramic

Posted
Posted

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>
Link to comment
https://forums.phpfreaks.com/topic/290541-div-alignment/
Share on other sites
CroNiX Member

CroNiX

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/290541-div-alignment/#findComment-1488351
Share on other sites
CroNiX Member

CroNiX

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/290541-div-alignment/#findComment-1488352
Share on other sites
Digitizer Newbie

Digitizer

Posted
Posted (edited)

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
Link to comment
https://forums.phpfreaks.com/topic/290541-div-alignment/#findComment-1488781
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.