I have an area on my page #topLeft which has a minimum height set to it.
Within #topLeft I have a section #heroBanners that I wish to anchor to the bottom of #topLeft - using position:absolute; bottom:0;
At first this works fine, however when #topLeft should expand it is not and the heroBanner section simply overlaps the content above it.
I am assuming the problem is called by mixing a min-height with absolute positioned content?
Any ideas how to get round this, code below:
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#heroBanners {bottom:0; position:absolute;}
It would be quite easy if you put both blocks or divs in a new div and set its style to {bottom:0; position:absolute;} instead of heroBanners.
<div id="parent">
<div id="topLeft">
<div class="linksBox">
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">
</div>
</div>
</div>
#topLeft {margin:0 27px 27px 0; width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}
#parent {bottom:0; position:absolute;}
Related
When I started Googling this question I saw the plethora of SO questions that are similar. But I tried them all and no luck.
I am getting a white margin from somewhere. Not sure where.
Here is a fiddle
https://jsfiddle.net/ayezee33/smxdewam/
Here is what I have tried.
Adding margin:0; and padding:0; to the html and body.
Linked up normalize.css
Added 0 margin on the block level element and child element
Found a user agent stylesheet inserting 8px margin (Chrome)
Used the !important call to override that
Noticed user agent stylesheet was applying block to my and
tried to override that but I am sure I actually want that.
Any help would be great. I am going crazy trying to figure this out.
Apparently I need to add code to post this question?
<header>
<h1>Building blocks are important!</h1>
<p>This website serves as my test to showcase my coding abilities</p>
<div id="cta">
<input id="cta" name="email" placeholder="Email">
<button type="submit">Learn More</button>
</div>
</header>
<div class="callout">
<p>Testing this call out section</p>
</div>
.callout {
display:block;
max-width:100%;
height:5em;
background:#000;
text-transform:uppercase;
}
.callout p {
line-height:5em;
margin:0;
}
The space is coming from the margin on your #cta:
margin: 1em auto;
Simplify your css too, I feel like you don't need most of your rules.
The margin on the #cta DIV is the one thats causing the white-space. You can add overflow:hidden to the header, that would fix the issue.
<nav>
<div id="main-nav">
<img src="img/logo.jpg" />
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
</ul>
</div>
</nav>
<header>
<h1>Building blocks are important!</h1>
<div id="cta">
<input id="cta" name="email" placeholder="Email" />
<button type="submit">Learn More</button>
</div>
</header>
<div class="callout">
<p>Testing this call out section</p>
</div>
header {
overflow: hidden;
}
I'm looking to change the background color of a footer. I tried making another div around it which worked but no matter what the background-color didn't budge. I must be overlooking something obvious!
This is what I have right now: http://jsfiddle.net/x5yvm50r/
And the code:
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
.floatleft {float: left; margin: 0 20px 0 0; width: 400px;}
.clear {clear:both}
If anyone has any idea, I'd really appreciate pointing me in the right direction! This is more or less what I'm hoping for it to look like eventually
Thanks! :)
Simple, you should wrap the content in a seperate block level element (i.e. div or footer). Here is the updated fiddle, using a block level element with id="wrapper": http://jsfiddle.net/df1zjwmb/1/
<footer id="wrapper">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
And the CSS:
#wrapper {
background-color: green;
}
Clearing floated elements means that elements below the clear will be reset, but does not turn the floated elements into a block itself. To solve the problem requires adding a wrapper div, which creates a block level element that you can apply a background color to. Or you could use something other than floats, like inline blocks.
Here is more information: Advantages of using display:inline-block vs float:left in CSS
Check this fiddle
HTML
<div class="floatleft footcontainer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
<li>Link 1
</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons</div>
<div class="clear"></div>
</div>
CSS
.floatleft {
float: left;
margin: 0 20px 0 0;
width: 400px;
}
.clear {
clear:both
}
.footcontainer {
background-color:lightblue;
float:left;
}
I've added a div which holds the 3 divs and gave it the background color and the float property.
Here you go: http://jsfiddle.net/5s4w19zy/
I wrapped the three floated divs in a container div (footer) and then floated them inside of that.
<footer>
<div>
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</ul>
</div>
<div>
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div>
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
footer
{
width: 100%;
height: 150px;
background: #f5f5f5;
overflow: hidden;
}
footer div
{
float: left;
display: block;
margin: 0 0 0 0;
width: 33.333333%;
height: 150px;
}
.clear {clear:both}
HTML5 offers semantic markup tags, and since you need a wrapper for your footer (allowing a parent element to have a the background-color property of your choosing), <footer> tag sounds like the way to go:
<footer id="footer">
<div class="floatleft">
<h3>Heading</h3>
<ul>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
<li>Link 1</li>
</div>
<div class="floatleft">
<h3>Heading</h3>
<img src="http://i.imgur.com/N23RQo5.png">
</div>
<div class="floatleft">
<h3>Heading</h3>
social icons
</div>
<div class="clear"></div>
</footer>
#footer { background-color:#asYouLikeIt; }
I have used flex box:
check this : http://jsfiddle.net/x5yvm50r/9/
HTML:
<footer>
<section class="left">l</section>
<section class="center">c</section>
<section class="right">r</section>
</footer>
CSS:
footer{
width:100%;
display:flex;
}
footer section{
flex:1;
}
I'm attempting to make tabs in a section in my body, but it's not showing up as tabs, but rather just links to sections of the text.
<div class="tabs">
<ul id="tabsnav" data-tab>
<li class="selected">Tab One</li>
<li>Tab Two</li>
<li>Tab Three</li>
<li>Tab Four</li>
</ul>
</div>
<div id="tab-1">
<p> tab 1</p>
</div>
<div id="tab-2">
<p> tab 2.</p>
</div>
<div id="tab-3">
<p> tab 3.</p>
</div>
<div id="tab-4">
<p> tab 4.</p>
</div>
In the CSS I have this:
div.tabs #tabsnav {
list-style-type: none;
float: left;
text-align: left;
margin: 60px;
background: #000000;
width:300px;
}
div.tabs #tabsnav li{
display: inline;
}
I'm new to tabs, so if anyone could throw me any hints as to how to make them show up so that only one tab is visible at a time, it would be greatly appreciated.
I believe you will need to use the :target selector in your CSS http://www.sitepoint.com/css3-tabs-using-target-selector/
I'm having some trouble formatting some text that appears after an ordered list. The text after the list is no longer indented. Why is this happening and how can I fix it?
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Practice Site</title>
<link rel="stylesheet" type="text/css" href="prac_style.css">
</head>
<body>
<h1>Practice Website</h1>
<div id="content">
<div class="post">
<p>
List of things:
<ol>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
Text after list.
</p>
</div>
</div>
</body>
</html>
And here is my CSS:
body {
margin: 0;
background: #FFEEEB;
font-family: verdana, sans-serif;
font-size: 0.85em;
}
p {
line-height: 1.5em;
text-align: justify;
}
#content {
float: left;
width: 700px;
margin-right: 20px;
}
#content .post {
background: #FFF;
padding: 10px;
margin-bottom: 20px;
border: 2px solid #CCC;
}
#content .post p {
margin: 10px 20px;
}
I believe the reason is that your HTML is not properly formatted. You shouldn't wrap an <ol> list inside a <p> tag. Also, I recommend you close the open <li> tags too.
Try this HTML instead:
<body>
<h1>Practice Website</h1>
<div id="content">
<div class="post">
<p>List of things:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Text after list.</p>
</div>
</div>
</body>
Your problem is that the browser is automatically ending the <p> tag before the <ol>. It's kind of like how you don't end your <li> tags because you know they will be ended automatically.(Which, by the way, is not the proper way of doing it.)
To fix this, just put the 'List of things:' and 'Text after list.' in their own separate <p> tags like this:
<p>List of things:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Text after list.</p>
If you have Chrome our some other browser with 'inspect element', use that and you will see what I mean.
Lists get given padding by default, other elements don't. You either need to apply the same padding to the <p> tag so they line up, or reset the padding and the list-style-position of the <ol>.
Also, don't nest <ol> inside <p>, it's not allowed. And close your <li> tags (</li>). Although I don't think it's required in HTML5, it is best practice.
Try:
<h1>Practice Website</h1>
<div id="content">
<div class="post">
<p>List of things:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>Text after list.</p>
</div>
</div>
To reset the list indentation use:
ol {
list-style-position: inside;
padding: 0;
}
You can then control the padding on the parent <div> if you want the whole block indented.
Demo
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Fluid width with equally spaced DIVs
I am trying to put footer elements which are texts. I was trying to have equal distance between texts elements.
<nav>
<ul>
<li><a>Item Reg</a></li>
<li><a>Item Sm</a></li>
<li><a>Item Very Long</a></li>
<li><a>Item Reg</a></li>
</ul>
</nav>
Here is an image explaining the scenario I want to implement. Left and right elements are always aligned to left and right respectively.
How can I do it with css and html. NOTE: CSS3 is allowed.
One way would be to use percentage points for widths.
ul {
width: 100%;
}
ul li {
display: table-cell;
width: 25%;
text-align: center;
}
You ca use a padding-left for each <li> something like this:
li{
position:relative;
float:left;
padding-left:20px;}
Assuming you have a fixed number of elements simply use :
ul{
padding:0 20px 0 20px;
width:100%;
}
li{
display:inline;
float:left;
width:25%;
}
<ul>
<li>One</li>
<li>Two</li>
</ul>
You can achieve it in this way
<div class="footer">
<div style="width:200px; float:left;">
<ul style="list-style:none">
<li>1</li>
<li>2</li>
</ul>
</div>
<div style="width:200px; float:left;">
<ul style="list-style:none">
<li>1</li>
<li>2</li>
</ul>
</div>
<div style="width:200px; float:left;">
<ul style="list-style:none">
<li>1</li>
<li>2</li>
</ul>
</div>
<div style="clear:both"></div>
</div>