I have been trying to build a very simple layout where everything flows vertically but as soon as I add any content to one of the divs, it creates whitespace between the div below it.
Here is an image for an example: http://chriswebbonline.com/imagelinks/help.jpg
Here is my HTML
<body>
<div id="container">
<div id="header">
<p> </p>
</div>
<div id="chat">
<p>.</p>
</div>
<div id="footer">
<p>.</p>
</div>
</div>
</body>
Here is my CSS
body {
background-color:#777;
font-family:Verdana, Geneva, sans-serif;
}
#container {
width:100%;
}
#header {
text-align:center;
background-color:#000;
color:#FFF;
}
#chat {
background-color:#EEE;
}
#footer {
background-color:#000;
}
I would like to know how to stop the whitespace from automatically appearing.
~Chris
try
p {
margin : 0;
}
paragraph tag margin is not 0 by default
Just a hunch, but try:
<div id="header">
<p> </p>
</div><div id="chat">
<p>.</p>
</div><div id="footer">
<p>.</p>
</div>
(No whitespace between opening and closing tags.)
Related
This is simplified markup:
<div id="container">
<div id="top" style="position:fixed">
<div class="header-top" style="z-index:100"></div>
<div id="access" style="z-index:100"></div>
<div id="image" style="z-index:50"></div>
</div><!--end top-->
<div id="main" style="z-index:75"></div>
</div>
as #main scrolls up over the fixed #top element, I would like it to display layered above #image, but below #access and .header-top.
Since the fixed position of #top creates a context, it seems I have a problem.
any thoughts?
You need to insert your <div id="main"> inside <div id="top"> after all.
You can create specific class for a fixed elements.
#access, #main, #image {
width:200px;
height: 200px;
}
.fixed {
position:fixed;
}
#access {
background-color:red;
margin: 100px 0 0 100px;
}
#main {
background-color:blue;
margin: 50px 0 0 50px;
position:absolute;
}
#image {
background-color:green;
}
<div id="container">
<div id="top">
<div class="header-top fixed" style="z-index:100"></div>
<div id="access" class="fixed" style="z-index:100"></div>
<div id="image" class="fixed" style="z-index:50"></div>
<div id="main" style="z-index:75"></div>
</div><!--end top-->
</div>
hi I want to add css in title sections in my page
I have a different sections in 1 page
but I want to change in each section fonts and color of title text
but not sure about how to do that
Give each section a class, and then apply the stylings to the children of that class. For example:
.section-1 h2{
color:#fff;
}
.section-1{
background-color:orange;
}
.section-1 p{
color:blue;
}
.section-2 h2{
color:#fff;
}
.section-2{
background-color:peachpuff;
}
.section-2 p{
color:black;
}
.section-3 h2{
color:#fff;
}
.section-3{
background-color:pink;
}
.section-3 p{
color:purple;
}
<html>
<head></head>
<body>
<div class="section-1">
<h2>Section 1</h2>
<p>Filler paragraph text</p>
</div>
<div class="section-2">
<h2>Section 2</h2>
<p>Filler paragraph text</p>
</div>
<div class="section-3">
<h2>Section 3</h2>
<p>Filler paragraph text</p>
</div>
<div class="section-4">
<h2>Section 4</h2>
<p>Filler paragraph text</p>
</div>
</body>
</html>
You can make separate css options via Id attribute.
Check out https://www.w3schools.com/html/html_css.asp. "The id Attribute"
You can use the style attribute
https://www.w3schools.com/tags/att_style.asp
<h1 style="color:blue;text-align:center">This is a header</h1>
<p style="color:green">This is a paragraph.</p>
You can see in this JSFiddle that the search div is centre aligned, how can I make it align to the top?
HTML:
<div id="wrapper">
<div id="banner">
<a href="#"><h1>Title</h2><br />
<h2>Subtitle</h2></a>
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
</div>
CSS:
#wrapper{
width:85%;
margin:35px auto;
}
#banner{
height:150px;
padding:30px;
padding-bottom:5px;
}
#search{
float:right;
display:inline;
width:38%;
}
#banner h1, #banner h2{
margin:0;padding:0;color:#A2A2A2;display:inline;
}
#banner h1{
font-size:50px;
}
#banner h2{
font-size:35px;
}
You have at least two options. If you want to float the search div to right, move it up in the html code. Now the search div floats right to the elements that are after it in the code. (Note that you had an unclosed div in the original code.)
See the Fiddle
<div id="wrapper">
<div id="banner">
<div id="search">
<label>Search</label>
<input type="textbox"/>
<input type="submit" />
<img src="images/logo.png" alt="logo"/>
</div>
<a class="" href="#"><h1>Title</h2><br />
<h2 class="">Subtitle</h2></a>
</div>
</div>
Other option is to make the preceding elements (a and h2) float to the left side of the search div but that doesn't look so good as the search div is not at the right edge of the browser window.
I'm trying to build a site with a fixed left sidebar of 220px and a fixed page filling the rest of the screen. I'm attempting to fill the page section with an image and have information over the top. The code works fine in Chrome and Firefox but can't get to work in IE.
Can anyone offer any suggestions for a better alternative I'd imagine without using absolute divs?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrap">
<div id="sidebar">
<div class="logo">
<a id="logo"> <img src="LOGO.png"/></a>
</div>
<ul class="navigation red" id="red">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
<li>Shop</li>
</ul>
</div>
<div id="page" style="padding:0 !important;">
<img src="images/back.jpg" class="back" alt=""/>
<div id="center">
<div class="header">
<center> <h3 class="page_title">Website Title</h3></center>
</div>
<!-- services -->
<div class="section group">
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background:#FFF;
font-size:14px;
height:100%;
width: 100%;
}
div#wrap {
width:100%;
max-width:100%;
overflow:hidden;
margin:0 auto!important
}
div#sidebar {
width:220px;
height:100%;
float:left;
background: #FFF;
border-right:1px solid #2e2f2f;
position:fixed
}
div#page {
height:100%;
left:220px;
right:0px;
background: #FFF;
position:absolute;
padding:2% 5%;
}
div#center{
margin:0 auto !important;
width:100%;
height:auto;
z-index:1000;
background:rgba(255,255,255,0.5);
}
.group {
padding: 0 20px 0 20px !important;
position:absolute;
z-index:10;
bottom: 20px !important;
left:0;
right:0;
max-width:850px;
margin:0 auto !important;
display:inline-table;
}
.header {
padding:0 20px 0 20px !important;
position:absolute;
z-index:10;
top: 8% !important;
left:0;
right:0;
max-width:850px;
margin-left:auto !important;
margin-right:auto !important;
}
img.back{
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
}
.one_half {
font-size: 17px;
float:left;
width:50%;
overflow:hidden;
}
Been trying to get my head round this for a while now and not making any progress any help would be very appreciated.
Thanks!
--- EDIT ---
Don't think I made clear it's the group and header divs i'm trying to center and which aren't in IE
If this isn't what you want, I'd need you to explain your requirements better.
http://jsfiddle.net/HhddF/
.back {
background-color:#3D6AA2;
height:100%;
width:100%;
}
I am just starting with responsive webdesign. I have a 2 column layout (sidebar and content).
<div class="main-container">
<div class="main wrapper clearfix">
<div class="con1">
<header>
<h1>container 1 h1</h1>
<p>text1</p>
</header>
<section>
<h2>overview section h2</h2>
<p> test</p>
</section>
</div>
<div class="con2">
<header>
<h1>container 2 article header h1</h1>
<p></p>
</header>
<section>
<h2>article section h2</h2>
<p>text</p>
</section>
</div>
<aside>
<h3>aside</h3>
<p>text</p>
</aside>
</div> <!-- #main -->
</div> <!-- #main-container -->
The content got 2 div container. On a small screen I want
Div1
Div2
On a large screen I want them swapped,
Div2
Div1
In my CSS I now got the following Media Query:
#media only screen and (min-width: 768px) {
.main div.con1 {
float: right;
width: 57%;
}
.main div.con2 {
float: right;
width: 57%;
}
Is it possible to swap the order around and if so, how can I do it? Anyone got maybe a link to a good tutorial?
Thanks a lot in advance !
The method used in the StackOverflow question "CSS positioning div above another div when not in that order in the HTML" seems to be your best bet.
with js:
//on load
responsive_change_box_order();
//on resize
window.addEventListener('resize', responsive_change_box_order );
function responsive_change_box_order() {
if (window.matchMedia("(max-width: 1118px)").matches) {
jQuery("#block-menu-block-1").remove().insertBefore(jQuery("#content"));
}
else{
jQuery("#block-menu-block-1").remove().prependTo(jQuery(".region-sidebar-second .region-inner"));
}
}
This snippet uses flexbox and related properties to meet your end requirement.Also kindly note that you use use appropriate vendor prefixes for flexbox when you implement or use something like autoprefixer or prefixfree.
.main{
display:flex;
flex-direction:column
}
.con1{
order:2;
background-color: green;
}
.con2{
order:1;
background-color: red;
}
/*For Large screen only*/
#media(min-width:1200px){
.con1{
order:1;
}
.con2{
order:2;
}
}
<div class="main-container">
<div class="main wrapper clearfix">
<div class="con1">
<header>
<h1>container 1 h1</h1>
<p>text1</p>
</header>
<section>
<h2>overview section h2</h2>
<p> test</p>
</section>
</div>
<div class="con2">
<header>
<h1>container 2 article header h1</h1>
<p></p>
</header>
<section>
<h2>article section h2</h2>
<p>text</p>
</section>
</div>
<aside>
<h3>aside</h3>
<p>text</p>
</aside>
</div>
<!-- #main -->
</div>
<!-- #main-container -->