Everything is OK in Chrome, FF and IE8. But in IE6 there's a strange margin right below the div "middle-column" (inside it there are 3 divs called featured1, 2 and 3.) which is above the divs "left-column" and "right-column"). I already tried everything to get rid of that problem. I tried the "display: inline technique" and CSS resets. Please Help! I'm testing my website here
MY HTML:
<body id="home">
<!-- header -->
<div id="header">
<div class="container">
<h1>wider design</h1>
<!-- navigation -->
<ul id="navigation">
<li class="home"><span>home</span></li>
<li class="portfolio"><span>portfolio</span></li>
<li class="about"><span>about</span></li>
<li class="contact"><span>contact</span></li>
</ul>
</div>
</div>
<div id="content">
<div id="top-column">
<p>We <strong>design and develop</strong> clean and effective webs in the <strong>top 3 languages</strong>
on the Internet. Internet is mean to reach the whole world.You are mean to reach the whole audience:</p>
</div>
<div id="middle-column">
<h2>Featured Projects</h2>
<div id="featured1">
<img alt="" src="images/project1.png"/>
<p>Featured work number 1</p>
</div>
<div id="featured2">
<img alt="" src="images/project2.png"/>
<p>Featured work number 2</p>
</div>
<div id="featured3">
<img alt="" src="images/project3.png"/>
<p>Featured work number 3</p>
</div>
</div>
<div id="left-column">
<h2>Web Design</h2>
<p>Create a web site easily with this online HTML generator. Follow the steps below to create web pages then click "view html page" to test it once it's completed. You can copy and paste generated code where you wish within the generated document(s). For example: You created an HTML table with 3 rows and 3 columns. You then added a link, which appears below the HTML table. If you want the link inside the HTML table, just cut and paste it inside the table in place of an "ADD TEXT" statement. Any where text,images,or links need to be, there will be a generated "ADD TEXT" statement in the HTML pages.</p>
</div>
<div id="right-column">
<h2>Web Translation</h2>
<p></p>
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11932489-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
</body>
</html>
MY CSS Reset:
/* reset */
* {
margin: 0;
padding: 0;
}
img {
border: none;
}
ul {
list-style: none;
}
/* tags */
body {
background-color: #FFFFFF;
color: #757575;
font-family: Arial, "MS Trebuchet", sans-serif;
font-size: 75%;
}
h1 {
background: url(../images/logo.png) no-repeat scroll 0 0;
margin-bottom: 20px;
text-indent: -9999px;
}
h2 {
color: #669BD9;
font-family: Arial;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
a {
font-family: Arial, "MS Trebuchet", sans-serif;
}
/* classes */
.container {
margin: 0 auto;
width: 960px;
}
My CSS Structure:
#content {
background-color: #FFFFFF;
padding: 20px;
overflow: hidden;
margin: 0 auto;
width: 960px;
}
#content h2 {
border-top: 1px dashed #C0C0C0;
border-bottom: 1px dashed #C0C0C0;
padding: 2px 0 2px 0;
margin: 15px 0 15px 0;
}
#top-column {
color: #818181;
font-size: 16px;
font-family: Arial, "MS Trebuchet", sans-serif;
margin: 10px 0 10px 0;
padding: 10px 0 20px 0;
}
#top-column strong {
font-weight: normal;
color: #3C3C3C;
}
#middle-column div {
float: left;
height: 224px;
width: 320px;
}
#right-column {
float: left;
width: 420px;
}
#left-column {
float: right;
width: 500px;
}
#footer {
clear: both;
background-color: #F0F0F0;
height: 200px;
}
If you take a look at div id="slideshow", you'll see that it has margin:10px auto which is basically saying to apply a margin-top of 10px and a margin-bottom of 10px. IE6 tends to double margins so by applying margin:5px 0; it should display the same as it does in Firefox, IE8, IE7 and all other up to date browsers.
-- Also just for reference, the 'auto' style was not needed in this case, this is generally used if you are looking to make an element sit in the center of its parent. An example of this would be if you wanted a website to display in the center of your screen you would use 'margin:0 auto;'
I hope this solves your problem!
Related
Originally my CSS was working fine for this particular section but for some reason which I can't figure out my CSS isn't being processed into the browser yet all my other CSS from that style sheet is fine. I know there has to be an error but I'm not sure what, with a fresh set of eyes I hope can help me out.
This is what I see:
<div id="service-contact-wrap">
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div id="service-contact">
<div class="service-contact-details">
<h3>Work With Me</h3>
<p>Please give me a call or use the contact form below</p>
<p class="service-contact-details-phone"> 000000 000000</p>
</div>
<?php echo do_shortcode("[contact-form-7 id='108' title='Contact form footer']"); ?>
</div>
</div>
</div>
</div>
/* Service Bottom Page Contact Form */
#service-contact-wrap {
width: 100%;
background-color: #005E86;
color: #fff;
margin-top: 20px;
margin-bottom: -15px;
margin-top: 15px;
}
#services-header {
font-size: 22px;
margin-top: 0px;
}
.service-contact-details {
text-align: center;
}
.service-contact-details h3 {
font-size: 2.5em;
margin-top: 54px;
}
.service-contact-details p {
color: #fff;
font-size: 16px;
}
.service-contact-details-phone {
font-size: 22px !important;
}
#service-contact {
padding-bottom: 20px;
}
.form-control {
max-width: 100%;
}
.service-contact-form-botton {
margin-right: auto;
margin-left: auto;
}
I am trying to float my logo to the left in the header but it doesn't float to left at all. I would really appreciate if someone could point our my error since I am new to CSS.
This is my website if you would like to see my problem live: http://cashski.com/
Here is my HTML code:
<div id="navigation">
<div class="center_navigation">
Contact
Instagram Followers
Instagram Photo Likes
<img src="img/logo.png" />
</div>
</div>
Here is my CSS code:
body {
padding: 0px;
margin: 0px;
font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}
#navigation{
width: 100%;
height: 50px;
margin: 0px auto;
position: relative;
background-color: #2d5b89;
border-bottom: 1px solid #244a75;
}
.center_navigation {
width: 960px;
height: 50px;
margin:0px auto;
font-size: 16px;
}
.center_navigation a {
padding: 10px 0 10px 30px;
float: right;
margin-top: 4px;
color: #babcc5;
text-decoration: none;
}
.center_navigation a:hover {
color: white;
}
.center_navigation a img {
float: left;
}
The problem is your all anchor tags are float:right and your image is inside a anchor tag, so making img float:left doesn't change much.
So you either need to put the style on the container of image ie. anchor tag like this
<a href="index.php" style="float: left;">
<img src="img/logo.png">
</a>
or if your image is always in last anchor tag then you can also use this
.center_navigation a:last-child{
float: left;
}
Js Fiddle Demo
Hello i'm new to html and css. I wanted to use a section to display some images but it gives me a strange problem. when I use div for my section in html I get the wanted result but when I only use < section > I don't get the same result. Can some one help me to use only section in my html and not the div ?
this my css code:
#content2{
margin: 30px 0;
background: white;
padding: 20px;
clear: both;
box-shadow: 0px 1px 1px #999;
text-align: center;
overflow:hidden;
}
.section {
display: inline-block;
margin: 0 10px;
}
.section a {
color: orange;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
}
.section p {
color: black;
font-weight:bold;
font-size: 1.5em;
line-height: 1em;
text-align: center;
display: block;
padding-bottom: 2em;
}
and my html looks like this:
<div id="content2">
<h4>Onze producten</h4>
<div class="section">
Pika deken
<img src="../images/NB1.jpg" />
<p>€19.99</p>
</div>
<div class="section">
City boy
<img src="../images/peuter1.jpg" />
<p>249.99</p>
</div>
<div class="section">
Classy girl
<img src="../images/peuter9.jpg" />
<p>€244.99</p>
</div>
<div class="section">
Outdoors
<img src="../images/girl1.jpg" />
<p>€129.99</p>
</div>
</div>
Thanks in advance!
First of all, make sure you specify <!DOCTYPE html> at the top of the page, to indicate HTML5 is being used (needed mainly for IE)
Second, <section> is not a block level element, e.g. a <div> is a block level element.
to fix this, add this to your .section CSS
display: block
this will cause a <section> to behave like a <div> and should fix your problem.
Make sure you're using <!DOCTYPE html> in your HTML document.
So, I'm trying to have two "halves" of the navigation thing under this title page thing, one floated left, the other right.
For some reason, They're not beside each other like they should be, unless I'm doing something wrong. Code is as follows:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Landing Mockup</title>
<link href="mockup.css" rel="stylesheet" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="landing-container">
Hello. I'm Charles Baker.<br />
<span id="landing-codeblock">{ I design websites. }</span>
<div id="landing-links">
<div id="landing-links-left">
Small links here.
</div>
<div id="landing-links-right">
<ul>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
<li>test1</li>
</ul>
</div>
</div>
<div id="clear"></div>
</div>
</body>
</html>
CSS:
body {
margin-top: 200px;
font-family: 'Roboto Slab', serif;
}
#landing-container {
width: 1000px;
margin: 0 auto;
font-weight: bold;
font-size: xx-large;
text-align: center;
}
#landing-codeblock {
font-family: 'Droid Sans Mono', monospace;
font-size: large;
}
#landing-links {
width: 700px;
margin: 0 auto;
border: 1px solid blue;
}
#landing-links-left {
border: 1px solid orange;
float: left;
text-align: left;
font-size: x-small;
width: 200px;
}
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right;
}
#landing-links ul {
border: 1px solid green;
list-style-type: none;
}
#landing-links ul li {
border: 1px solid red;
display: inline;
}
#landing-links li a {
display: inline-block;
padding: 5px;
}
#clear {
clear: both;
}
I've got borders temporarily so I can see where things are, but...yeah. I need to float them next to each other, I think I'm doing something entirely wrong. Any thoughts?
Behold! http://jsfiddle.net/QHeDZ/
I added display:inline-block to your .landing-links-left and .landing-links-right css and removed your floats. I think this is what you were trying to do? If not, let me know! I can fix it up.
You're getting a wedge of top (and bottom) margin as a browser default. If you inspect your unordered list in Chrome you'll see from the user agent style sheet:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
You can set the margins on your list to 0 to remove this default. Also, I would recommend having a look at http://necolas.github.io/normalize.css/ which provides a nice set of default rules for common elements, taking the pain away from these kind of issues.
Just add <div id="clear"></div> before closing this div <div id="landing-links">
#landing-links-right {
font-size: small;
text-align: right;
width: 400px;
float: right; //modify this to left(so it could be next to the other container)
}
Hope this helped you!Cheers!
Technically they are on the same line, but margin and line-height values aren't being clearly defined for better aligning. Including the following properties:
#landing-links-left { line-height: 20px; }
#landing-links ul {
margin: 0;
line-height: 20px;
}
I have a while loop that echos out several images. My next step is to have text over the image. However, as soon as I add that text to the while loop my images go from inline to block. I've tried just about everything from changing the display to inline and playing with the different positions with the images and text. How do I fix this. Code below.
Script Section
<script type="text/javascript" >
$(function() {
$("h2")
.wrapInner("<span>")
$("h2 br")
.before("<span class='spacer'>")
.after("<span class='spacer'>");
});
</script>
Style Section
<style type="text/css">
body {height: 1100px;}
html {height:1200px; }
h2 {
top: 200px;
left: 25px;
width: 100px;
position: relative;
}
div #image_box {width: 700px; display:inline;}
img {border: 1px solid grey; padding: 0; margin:15px; display:inline;}
#viewers_pleasure { padding: 15px; height: 1200px; width: 4800px; }
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h2 span.spacer {
padding:0 5px;
}
</style>
Body Section
<div id="viewers_pleasure">
<div id="image_box">
<img src="images/89c246298be2b6113fb10ba80f3c6956_8" width="560" height="420"/>
<h2><br>$</h2>
</div>
<div id="image_box">
<img src="images/8e73b27568cb3be29e2da74d42eab6dd_9" width="560" height="420"/>
<h2><br>$</h2>
</div>
<div id="image_box">
<img src="images/216e77337cdef3bd1bede845d1aba608_3" width="560" height="420"/>
<h2>weezer<br>$0</h2>
</div>
<div id="image_box">
<img src="images/452ff601eb791947cd76a2119f1db973_2" width="560" height="420"/>
<h2><br>$</h2>
</div>
</div>
Try using float left for image_box
div #image_box {width: 700px; display:inline; float:left }
I believe the problem is that the <h2> tags are display:block by default. Try removing them from the flow and see if fixes the image display issue.