4 Replies - 634 Views - Last Post: 07 August 2014 - 02:37 AM

#1 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

my divs are smashed together

Posted 05 August 2014 - 01:40 AM

Well kind of. I fixed it so the divs are not smashed by putting padding on the .content but something is preventing my dropdown menu from going down. Can someone lend me your eyes? :) Thanks

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

body {
	margin-left:0;
	margin-top:0;
	margin-right:0;
	margin-bottom:0;

	
}

#top {
	height:100px;
	background-color:#ffffff;
	
	
	}

.image{
	margin-left:10px;
	margin-top:10px;
	height:150px;
	width:150px;
}


	ul
{
list-style-type:none;
margin:50;
padding:0;
overflow:hidden;
float:right;
}

ul ul {
	display: none;
}


nav ul li
{

float:left;
}

nav ul li:hover > ul {
		display: block;
	}

nav ul ul li {
		float: none; 
		
	}
	

nav li a:link,a:visited
{
display:block;
width:220px;
font-weight:bold;
color:#36486b;
background-color:#ffffff;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}

#content   {
	position:absolute;
	margin-left:50px;
	margin-top:200px;
	margin-right:50px;
	padding-top:100px;
}

#content img   {
	margin-left:10px;
	margin-top:10px;
	height:150px;
	width:200px;
	
}

#content .food   {
	 list-style-type: none;
	 margin: 0;
	 padding: 0;
	 text-align: center;
}

#content .food li {
	display: inline-block;
	margin: 0 1em 1em 0;
	padding-right:20px;
	color:darkblue;
	position: relative;
	
}

span.text {
	background: rgba(0,0,0,0.5);
	color: white;
	cursor: pointer;
	display: table;
	height: 150px;
	left: 0;
	position: absolute;
	top: 0;
	width: 150px;
	 opacity: 0;
	 -webkit-transition: opacity 500ms;
	-moz-transition: opacity 500ms;
	-o-transition: opacity 500ms;
	transition: opacity 500ms;
}
 
span.text span {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}

ul.food li:hover span.text {
opacity: 1;
}

p   {
	font-family:"Times New Roman", Times, serif;
	font-size:24px;
	color:#19306d;
	text-align:center;
	color:#306;
}




Is This A Good Question/Topic? 0
  • +

Replies To: my divs are smashed together

#2 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3734
  • View blog
  • Posts: 13,054
  • Joined: 12-December 12

Re: my divs are smashed together

Posted 05 August 2014 - 03:13 AM

The css is of limited use without the html.
Was This Post Helpful? 0
  • +
  • -

#3 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

Re: my divs are smashed together

Posted 05 August 2014 - 03:24 AM

Ok sorry
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>page</title>
<link rel="stylesheet" href="style/style.css" />
</head>

<body>

<div id="top">

<?php include 'includes/nav.html' ?>

</div>

<div id="content">

<p>Main content goes here. </p>
</div>

</body>
</html>




Ok I'll go ahead and put in the nav.html

<nav>        				            
  <ul>

			<li><a href="/../index.php">Home</a></li>
            <li><a href="#">About</a>
            <ul>
            <li><a href="/../link1.php">Link</a></li>
            <li><a href="link2.php">Link</a></li>
            <li><a href="link3.php">Link</a></li>
            </ul>
            
            
	                  
			<li><a href="contact.php">Contact</a></li>  
	                         
	                       </ul>

</nav>



Was This Post Helpful? 0
  • +
  • -

#4 codespook  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 146
  • Joined: 31-October 12

Re: my divs are smashed together

Posted 05 August 2014 - 08:32 PM

Accidentally fixed it:)
Was This Post Helpful? 0
  • +
  • -

#5 jjh08  Icon User is offline

  • D.I.C Head

Reputation: 55
  • View blog
  • Posts: 198
  • Joined: 13-July 12

Re: my divs are smashed together

Posted 07 August 2014 - 02:37 AM

View Postcodespook, on 05 August 2014 - 08:32 PM, said:

Accidentally fixed it:)

I saw this on line 31 in your first post.
margin:50;


I assume that is the line you fixed, correct?
Do you know about CSS Validator?
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1