Hi my CSS code is this:
#bottom {
height: 100px;
background-color: #afafaf;
width: auto;
border-top: 4px solid green;
margin-top: 90px;
}
my code is this:
<body>
<div id="wrapper">
<div id="logo"></div>
</div>
<div class="box">Go to our forums » </div>
<div id="bottom">TEST</div>
</body>
This is what it looks like: http://screencloud.net/v/cxEu
why does it show those gaps on both ends of the div? I want it to show across the whole screen. I tried different widths, but nothing works. Or I'm doing something wrong !
Looks like the body's margins, try this:
body {
margin: 0;
}
Specify margin: 0 and padding: 0:
#bottom {
height: 100px;
background-color: #afafaf;
width: auto;
border-top: 4px solid green;
margin: 0;
padding: 0;
margin-top: 90px;
}
Related
I’m working on a website in which at the bottom you can see the three social media accounts it has, but with the following code, this is the output, but I don’t know what’s causing it.
As you can clearly see, there is a grey box going over the three boxes, and I don’t know how to fix this.
.container {
width: 600px;
height: 190px;
background-color: #ff7675;
padding-top: 20px;
padding-left: 15px;
padding-right: 15px;
}
#st-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
#nd-box {
float: left;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
margin-left: 20px;
}
#rd-box {
float: right;
width: 180px;
height: 160px;
background-color: white;
border: solid black;
}
<div class="container">
<div id="st-box">
<iframe></iframe>
</div>
<div id="nd-box">
<iframe></iframe>
</div>
<div id="rd-box">
<iframe></iframe>
</div>
</div>
What can I do?
You should style your iframes. Here is some code that will help you on your way.
iframe {
display: block;
width: 100%;
border: 0;
}
The iframes inside your inner divs are causing these strange-looking borders. You can style them with css aswell.
For example, you might want to give them:
border:0;
width:100%;
The browser adds a default border to iframe. Give border: 0 to the iframe. Check screenshot.
iframe { border: 0; }
I'm new to web development in general and I am stil just a novice in HTML and CSS.
I am currently trying to minimize the number of declarations in my stylesheet to clean it up, but I have come across something I need help with.
Anyway, here is the code I'm asking about:
#div1,
#div2,
#div3 {
width: 100px; height: 100px;
border: 1px solid #f00;
background-color: #0f0;
float: left; margin: auto 5px auto;
position: relative; left: 10px; top: 10px;
}
Here, each div has a green background color. What I'm trying to do is set a different color for each div in a single declaration.
Is this possible?
Thanks. Appreciate any and all help.
The cleanest way to style these elements would be to put a common class on them, and only style the individual divs for their differences (the color).
.box {
width: 100px;
height: 100px;
border: 1px solid #f00;
float: left;
margin: auto 5px auto;
position: relative;
left: 10px;
top: 10px;
}
#div1 {
background-color: #0f0;
}
#div2 {
background-color: #0ff;
}
#div3 {
background-color: #ff0;
}
<div class="box" id="div1"></div>
<div class="box" id="div2"></div>
<div class="box" id="div3"></div>
in css code
#box{
width: 100px;
height: 100px;
border: 1px solid #f00;
float: left;
margin: auto 5px auto;
position: relative;
left: 10px;
top: 10px;
}
in html code
<div id="box" style="background:green"> </div>
<div id="box" style="background:red"> </div>
<div id="box" style="background:blue"> </div>
I would like to split my div tag up in two. But I am not quite sure how to do it. It looks like this now:
And I would like that there is a header in the div tag with a color for a headline. It should look like this:
But how can I split up like that?
Best Regards Julie
HTML and CSS:
#container {
width: 100%;
}
body {
background-color:rgb(48,48,48);
}
.topbar {
width: 100%;
height: 50px;
background-color: red;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.latestnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.hotnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.coldnumbers {
float: left;
height: 600px;
width: 50px;
padding: 25px;
border: 2px solid #FFECB3;
margin: 20px;
background-color:rgba(116,116,116,0.3);
}
.numberheader {
height 100px;
background-color: red;
position: absolute;
top: 80px;
left: 30px;
right: 0;
width: 100px;
height: 50px;
}
.content {
float: left;
height:50px;
width:700px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/my_script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css\placing.css">
<title>Numbers</title>
</head>
<body>
<div id="container">
<div class="topbar">
<p>Topbar</p>
</div>
<div class="latestnumbers" id="show">
<div class="numberheader">
<p>Tal</p>
</div>
</div>
<div class="content">
<p>Enter The Number</p>
<form id="myForm" action="select.php" method="post">
<input type="number" name="numbervalue">
<button id="sub">Save</button>
</form>
<span id="result"></span>
</div>
<div class="hotnumbers">
<p>test</p>
</div>
<div class="coldnumbers">
<p>test</p>
</div>
</div>
</body>
</html>
EDITED:
I have just tried to position the div tag now, and it is position in the middle now. But the code for the position is pretty messy, isn't it?
Try this, I think this was what you meant right?
https://jsfiddle.net/54d4tbtc/
It didn't look that good because of the width's
.content {
float: left;
height: 50px;
width: 300px;
padding: 25px;
border: 2px solid navy;
margin: 20px;
background-color: red;
}
I would make two divs, and wrap one inside the other like this:
<div class="topbar"></div>
<div class="outer">
<div class="inner">
<p>words</p>
</div>
</div>
when combined with this type of CSS:
.inner{
width:100%;
height: 150px;
background-color: #FFECB3;
word-wrap: break-word;
text-align: center;
}
.inner p{
padding-top: 10px;
}
it should work fine. Not sure what .talraekkeheader does in your CSS, but if it was planned for this .inner div then you may not need it after doing this.
NB. I added the word-wrap styling to .inner to avoid the overflow of text that you put in the div. I added padding to the paragraph text within the element for aesthetics mainly, as you don't want text to close to the top of the div.
I'm trying to make liquid HTML layout with header (taking all available width and 130px height), 2 columns (1: 300px width all possible height, 2: all available width after column 2 took its 300px and 15-20px margin between them).
Atm I've got this:
HTML:
<div class="wrapper">
<div class="header">
<!-- .... -->
</div>
<div class="content">
<div class="left-column">
<!-- ... -->
</div>
<div class="right-column">
<!-- ... -->
</div>
</div>
</div>
CSS:
html, body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
min-width: 1000px;
min-height: 500px;
}
body {
font: 12px sans-serif;
background-color: #fff;
color: #000;
}
.wrapper {
height: 100%;
width: 100%;
position: relative;
}
.header {
padding: 0 30px;
height: 100px;
left: 0px;
right: 0px;
position: absolute;
border: 1px solid black;
border-top: none;
}
.content {
position: absolute;
top: 120px;
left: 0;
right: 0;
bottom: 0px;
margin: 10px 20px;
border: 1px solid black;
}
.left-column {
float: left;
width: 300px;
border: 1px solid black;
}
.right-column {
margin-left: 315px;
border: 1px solid black;
}
The question is: are there any better solutions?
Thanks.
I took your HTML and created this fiddle for you: http://jsfiddle.net/RdQJY/1/. I didn't use any of your CSS though - I just don't like positioning used in the way you are using it, so decided to write it from scratch (sorry about that). The lorem ipsum text is just there as a placeholder - if you remove it, you'll see that the divs will occupy the whole window. Hope this helps!
P.S.: the only drawback to my method of having equal-height columns is that there is no easy way to apply a bottom border to them.
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.