Skip to content
View in the app

A better way to browse. Learn more.
Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

problem positioning div

Sting
in Website Design and UX

Featured Replies

Hello,

 

I recreated my navigation in css and put it in a div. But i am having difficulties positioning the div to the exact location.

 

As you can see the div is at the bottom of the logo , while it should be on the right side of the logo. I tried different things but i cant get it right. Maybe someone can help me out here?

 

<link href="css/master.css" rel="stylesheet" type="text/css" />
<link href="css/navigation.css" rel="stylesheet" type="text/css" />
</head>
<body>
<body>
<div id="wrap">

 <div id="header"> </div>

<div id="topwrap">	 

<div id="logo">
  <img src="images/logo.png" alt="logo" />	</div>

  <div id="nav">
	<ul id="iconmenu">
	  <li id="home"><a href="index.html"></a></li>
	  <li id="diensten"><a href="diensten.html"></a></li>
	  <li id="portfolio"><a href="portfolio.html"></a></li>
	  <li id="contact"><a href="contact.php"></a></li>
	</ul>
  </div>
</div>

 <div id="contentwrap">
<div id="main">

....content of the site....

 

 

navigation css

 

#topwrap {
	width: 963px;
	background-image: url(../images/bgmain.png);
}

#logo {
	padding-left: 40px;
	padding-top: 7px;
	width:243px;
}

#nav {
	position: absolute; 
	width: 460px;
	margin-left:0px;
	z-index:1;
}	

#iconmenu {
	position: relative; 
	width: 460px; 
	height: 131px;
	background: url(../images/buttons.png) 0 0 no-repeat; 
}

#iconmenu li {
	margin: 0;
	paddin: 0; 
	position: absolute; 
	top: 0; 
	list-style: none;
}

#iconmenu li , #iconmenu a {
	height: 131px; 
	display: block; 
}


#iconmenu #home {
	left: 0px;
	width: 115px;
}

#iconmenu #diensten {
	left: 115px; 
	width: 115px;
}

#iconmenu #portfolio {
	left: 230px; 
	width: 115px;
}

#iconmenu #contact {
	left: 345px; 
	width: 115px;
}

#iconmenu #home a:hover {
	background: transparent  url(../images/buttons.png) -0px -131px no-repeat;
}

#iconmenu #diensten a:hover {
	background: transparent  url(../images/buttons.png) -115px -131px no-repeat;
}

#iconmenu #portfolio a:hover {
	background: transparent  url(../images/buttons.png) -230px -131px no-repeat;
}

#iconmenu #contact a:hover {
	background: transparent  url(../images/buttons.png) -345px -131px no-repeat;
}

 

master css

 

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

/*-------General-------*/

body, html {
	margin:0;
	padding:0;
	background:#094e77;
	color:#000000;
}
body {
	min-width:963px;
	background-image: url(../images/bg.png);
	background-repeat: repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/*-------Text-------*/

h1 {
	color:#0d527a;
	text-align: left;
	font-size: 23px;
	padding:0;
	margin:0 55px 10px 54px;
}

h2 {
	color:#F2850C;
	font-size: 18px;
	padding:0;
	margin:10px 0px 0px 0px;
	}		

p  {
	margin: 0px;
	line-height: 18px
	}

.bold  {
	line-height:155%;
	font-weight: bold;
	}

.art {
	color:#F2850C;
	font-size: 16px;
	margin: 0px;
	}

.tech  {
	line-height:110%;
	font-size: 90%;
	}

/*-------Lists-------*/

ul { 
list-style-type: square 
}  

.list li
	{
	list-style-image: url(../images/lees.png);
	margin: 1em 0;
	line-height:155%;
	}

/*-------Link Styles-------*/

a:link, a:visited {
	color:#094e77; 
	text-decoration:none;
}

a:hover {
	color: #cc3333; 
	text-decoration:underline;
}

a.lees, a.lees:visited, a.lees:hover {
	margin-top: 10px;
	display: block;
	float: right;
	line-height: 15px;
	background: url(../images/lees.png) no-repeat left center;
	text-indent: 20px;
	}

/*-------Images -------*/

img {
border:0;
}

.imgleft {
float: left;
padding: 0px 10px 10px 0px;
}

.imgcenter
	{
	text-align:center;
	margin-top:0px;
	margin-bottom:0px;
	padding:0px;
	}

.imgref {
float: left;
padding: 0px 10px 20px 0px;
}

.icons {
padding: 0px 10px 10px 0px;
}

/*-------Structure -------*/

#wrap {
	margin:0 auto;
	width:963px;
}
#header {
	background: url(../images/top.png);
	height: 50px;
}


#contentwrap {
	background-image: url(../images/bgmain.png);
	width:963px;
	overflow: hidden;
	min-height:440px;
	position: relative;
}

#main {
	float:left;
	width:570px;
	margin:0 0 0 55px;
	padding:10px 0px 0px 0px;
}

#main h1 {
	color:#0d527a;
	text-align: left;
	font-size: 23px;
	padding:0;
	margin:0 55px 0px 0px;
}

#mainfull {
	float:left;
	width:855px;
	margin:10px 0 0 55px;
}

#sidebar {
	float:right;
	width:230px;
	margin:10px 45px 0 0;
	padding:0px 10px 0px 10px;
	border-left: 1px dotted #ccc;
	font-size: 11px;
	color:#666666;
}

div.spacer {
clear: both; 
height: 20px;
}

div.small {
clear: both; 
height: 10px;
}

/* -------colset diensten------- */

.colsetA1 {
	float: left;
	width: 160px;
	margin:0px 5px 0px 0px;
}

.colsetA2 {
	position: relative;
	float: left;
	width: 240px;
	margin:0px 40px 0px 0px;
}

.colsetA4 {
	position: relative;
	float: left;
	width: 240px;
	margin:0px 0px 0px 0px;
}

/* -------colset mailings------- */	

.colsetB1 {
	float: left;
	width: 185px;
	margin:0px 5px 0px 0px;
}

.colsetB2 {
	position: relative;
	float: left;
	width: 370px;
	margin:0px 0px 0px 10px;
}

/* -------colset hosting -------*/	

.colsetC1 {
	float: left;
	width: 160px;
	margin:0px 0px 0px 0px;
}

.colsetC2 {
	float: left;
	width: 180px;
	margin:0px 25px 0px 0px;
}

.colsetC3 {
	float: left;
	width: 180px;
	margin:0px 0px 0px 0px;
}


/* -------colset referenties------- */	

.colsetR {
	float:left;
	width:580px;
	margin:0 0 0 55px;
	padding:0px 0px 0px 0px;
}

.colsetR1 {
	float:left;
	width:285px;
	margin:0;
	padding:0px 0px 0px 0px;
}

.colsetR2 {
	float:right;
	width:285px;
	margin:0;
	padding:0px 0px 0px 0px;
}

/*-------Table-------*/

caption {
	padding: 0 0 5px 0;
	width: 370px;	 
	text-align: right;
}

.domtable   { 
	width: 370px;
	border-collapse: collapse; 
	border: 1px solid #c0c0c0;
	font: 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
	letter-spacing: 2px;
	margin-left: auto; 
	margin-right: auto;
	}

.tdext		{ 
	border: 1px solid #c0c0c0; 
	text-align: left;
	width: 50px; 
	background: #f1f1f1;
	padding: 5px 5px 5px 10px;
	}

.tddom	{ 
	border: 1px solid #c0c0c0; 
	text-align: center;
	width: 100px; 
	}

/*-------Footer-------*/
#footer {
	background: url(../images/end.png) top left no-repeat;
	clear:both;
	min-height: 80px;
	padding: 110px 0 0 10px;	
	text-align: center;
	color:#cccccc;
	font-size:90%;
	margin: 0;
}

.bar {
color:#ffffff;
}

a.footer:link, a.footer:visited {
	color:#ffffff; 
	text-decoration:none;
}

  a.footer:hover {
	color: #ffffff; 
	text-decoration:underline;
}

It's probably your absolute positioning that's breaking things

 

Try floating your logo and nav...

 

#logo {
  float: left;
  padding-left: 40px;
  padding-top: 7px;
  width:243px;
}

#nav {
  float: right;
  width: 460px;
  margin-left:0px;
  z-index:1;
}

  • Author
It's probably your absolute positioning that's breaking things

 

Try floating your logo and nav...

 

#logo {
  float: left;
  padding-left: 40px;
  padding-top: 7px;
  width:243px;
}

#nav {
  float: right;
  width: 460px;
  margin-left:0px;
  z-index:1;
}

 

 

Yes I tried that before but it gives me the strangest results . In every browser it distorts the layout in a different way.

I have uploaded the css file with float added , so you can see what it does in IE, FF, Opera en NS.

 

I am thinking that maybe i could just use a table in the top div and put the logo and navigation in a table. one minute work and problem solved. Still i d like to build it completely tableless.

  • Author

I have rewritten my code and now i got it finally to work.

My new code is (if anyone is interested)

 

/*-------general -------*/

body, html {
	margin:0;
	padding:0;
	background:#094e77;
	color:#000000;
}
body {
	background-image: url(images/bg.png);
	background-repeat: repeat-x;
}

/*-------center  --------*/
#wrap {		
	margin:0 auto;
	width:963px;
}
/*-------structure-------*/

#topwrap {
	width: 963px;
	background-image: url(images/bgmain.png);
	height: 150px;
}

#nav {
	float: right;
	width: 460px;
	margin:0px 0px 0px 0px;
	padding:0px 45px 0px 0px;
}		

#logo {
	float: left;
	position: relative; 
	width:243px;
	left:40px;
}

#header {
	background: url(images/top.png) no-repeat;
	height: 50px;
}

#contentwrap {
	background-image: url(images/bgmain.png);
	width:963px;
	overflow: hidden;
	min-height:440px;
				position: relative;
}

 

<body>
<div id="wrap"> 
<div id="header"></div>
<div id="topwrap"> 

<div id="logo">
<img src="images/logo.png" alt="redrice" />
</div>

<div id="nav">
  <ul id="iconmenu">
	<li id=""><a href=""></a></li>
	<li id=""><a href=""></a></li>
	<li id=""><a href=""></a></li>
	<li id=""><a href=""></a></li>
  </ul>
</div>

</div> 
<div class="topline"></div>
<div id="contentwrap"></div>
<div class="endline"></div>

<div id="footer">
</div>

Create an account or sign in to comment
Go to topic listing

Account

Navigation

Search

Search

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.