I want to make a menu on top of a div, so basically the text is on top of it (see example).
I want to have the text of the menu inside that same div, so the html is something like this:
<div id="text">
<div id="menu">Portfolio | About us</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
Thanks in advance.
Position the div relatively (position: relative;), and then the text absolutely (position:absolute;). Make sure the text is inside an element inside the div, and then set the nested element's top position to a negative number until it is positioned to your liking.
To center it, you will need to mess about with left and right properties.
This JSFiddle just about mimicks your screenshot.
I had to add this to the #menu styling:
margin-bottom: 0;
padding-bottom: 0;
line-height: 1em;
And then this to #text p:
margin-top: 0;
And that did the trick.
Making it all centered was as simple as this:
#text {
width: 500px;
margin: 0 auto;
}
You can use relative/absolute positioning or try something like this
<div id="text">
<div id="menu">Portfolio | About us</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
And in your css:
#text{
text-align:center;
}
#menu{
margin-top:-20px;
}
See http://jsfiddle.net/rVjCB/
HTML:
<div class="menu">
<ul class="top">
<li>Portfolio</li>
<li>About us</li>
</ul>
Text
</div>
CSS:
.menu{
background:#957F00;
max-width:500px;
margin:0 auto;
color:white;
}
.menu>.top{
background:white;
overflow:hidden;
color:black;
}
.menu>.top>li{
float:left;
width:50%;
border-left:3px solid #957F00;
margin-left:-3px;
text-align:center;
}
Related
This seems so trivial, but how do I make the background color or image of a div span the whole window, but keep the content in a wrapper or set width? Almost like a footer, or nav.
Like on this page in the footer, the gray and the lack parts go the whole across the page but any type is still in a set width that matches the rest of the page. Some pages have these in the middle and divide their whole page using this technique.
Thanks for any help!
For a content wrapper, make the wrapper div fixed width and use margin: 0 auto to center it horizontally - http://codepen.io/anon/pen/kwebf
<style type="text/css">
body {
background: #ff0000;
}
div {
margin: 0 auto;
width: 500px;
}
</style>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
For fixed width content without a wrapper, put horizontal padding on your body - http://codepen.io/anon/pen/hoKdk
<style type="text/css">
body {
padding: 0 200px;
background: #ff0000;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
you could either wrap each section in an element (A) just to span across the page and prodive the background, and wrap the content in an element (B) to center it in A. like this:
<div id="main-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<style>
#main-wrap {
background:red;
}
#footer-wrap {
background:green;
}
.content {
width:300px;
margin:0 auto;
}
</style>
or you could use an advanced solution similar to this one.
it really depends on your design and requirments
We have a fix set of CSS rules, but when we modify the HTML markup to include a canvas, a weird padding appears on the neighboring cell. Here is the CSS:
.wrap{
width:100%;
display: table;
}
.row {
display: table-row;
}
.left{
width: 100px;
display: table-cell;
background-color: #0f0;
}
.right{
background-color: #f00;
display: table-cell;
}
Normal case:
See the fiddle here. Note the position of the text in the red cell: top, aligned with the top of the cell.
<div class="wrap">
<div class="row">
<div class="left">
Lorem<br>Lorem<br>Lorem<br>Lorem<br>Lorem
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Canvas case:
See the fiddle here. We swapped the Lorem text in the left cell for a 90x90 canvas. See how the text on the red cell is now aligned with the bottom of the canvas and a padding is applied to the cell.
<div class="wrap">
<div class="row">
<div class="left">
<canvas width='90px' height='90x'></canvas>
</div>
<div class="right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
</div>
Question: Could you explain why this padding appears on the left cell, and if this is an expected behavior? Also, could you propose a solution that gets rid of this 'bug'?
I have the following problem:
There's an image floating left and a margin to the right.
Next to it, there is a div containing a headline and a text (I don't know any height-values of both, because it will be inserted dynamically).
The headline must align to the top and the text to the bottom. I thought it's enough to position the text absolute, but if the height of the image is smaller than the height of the headline + the text, the text flows into the headline....
I haven't found any solution to position the text at the bottom but letting it stay in document flow.
I am not allowed to use any table-elements (on the otherhand, display: table and so on is allowed, but I haven't figured out any solution with that as well)
<<<HTML
<div>
<h4>A headline, that isn't involved</h4>
<div class="clearfix">
<div> <!-- float left, margin-right -->
<img>
</div>
<div> <!-- float left -->
<h5>The headline aligning to the top</h5>
<p>
Some text aligning to the bottom
</p>
</div>
</div>
</div>
HTML
Please help me, I just can't figure out any solution!
/EDIT:
Both the imnages' and text-/headline-containers' height may vary, so no fixed height.
What i got so far is (by assuming, the text wont have more than 4 lines (but thats not the best way). The next Problem is: Firefox adds the margin-bottom of .box to the bottom: 0; of the text (like: bottom: -35px; But shown as bottom: 0; ... Chrome does interpret that the right way):
<style>
.box {
width: 488px;
float: left;
margin-bottom: 33px;
margin-right: 22px;
padding-top: 5px;
}
.table {
display: table;
}
.box.wide .box-content {
display: table-row;
}
.box.wide .box-content > div {
display: table-cell;
position: relative;
width: 233px;
}
.box.wide .box-content > div:first-child {
margin-right: 22px;
}
.box.wide .box-content div h5 {
padding-bottom: 88px;
}
.box.wide .box-content div p {
position: absolute;
bottom: 0px;
}
</style>
<div class="box wide width-488">
<div>
<h4>Überschrift</h4>
<div class="table">
<div class="box-content">
<div>
<img alt="" height="401" width="233" src="res/dummy/233-130.jpg">
</div>
<div>
<h5>Überschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing eliÜberschrift Lorem ipsum dolor sit amet, con sectetuer adipiscing elit</h5>
<p>
Lorem ipsum dolor sit amet, con sectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lor em ipsum dolor amet.
mehr
</p>
</div>
</div>
</div>
</div>
</div>
try using display: inline-block; on both floating elements and the text element that you want aligned to the bottom.
Then put the property vertical-align: bottom; on the text element you want aligned to the bottom.
I assumed you can make the right column a fix height, since the left column & right are the same in your image example.
I made a jsfiddle for your convenience: http://jsfiddle.net/hLPXM/
Alternately, here is what I did, based on your original code:
<h4>A headline, that isn't involved</h4>
<div class="clearfix">
<div class="left"> <!-- float left, margin-right -->
<img src="http://placehold.it/150x350" alt="placeholder" />
</div>
<div class="right"> <!-- float left -->
<h5>The headline aligning to the top</h5>
<div class="bottom-text">
<p>
Some text aligning to the bottom
</p>
</div><!-- .bottom-text -->
</div>
</div>
Note I added a .bottom-text class around the <p> that you want to align bottom.
Here is the CSS for the divs to float properly, etc. Note the position:relative; :
.left {float:left; margin-right:20px;}
.right {float:left; background:#eeddff; /*background to see div*/}
.left, .right {height:350px; position:relative;}
And more importantly the text starting from the baseline:
.bottom-text {
position:absolute;
bottom:0;
}
Here is a solution for you, using display: table, relative and absolute positioning:
<div>
<h4>A headline, that isn't involved</h4>
<div style="display:table;">
<div style="display:table-row;">
<div style="display:table-cell;padding-right: 20px;">
<img style="display:block" src="http://baconmockup.com/300/200">
</div>
<div style="display:table-cell;background:green;position:relative;vertical-align:top;">
<p style="">Some text aligning to the top</p>
<p style="position:absolute;bottom:0;">Some text aligning to the bottom</p>
</div>
</div>
</div>
</div>
It does not rely on any fixed heights, and adopts to the height of the image automatically.
jsfiddle.net/EUvXh/
I don't know if you have already fixed this but the easiest way is to add margin-top: auto; to your p tag.
I have a container which has my header, nav, sidebar and article inside. When the contents of the article go past the fold, there is either padding or margin being added to the left of the container. It's clear when you change between pages where the content goes past the fold, and pages where it doesn't, as the container jolts to the right.
HTML
<div id="container">
<header>
Blog
</header>
<nav>
<ul>
<li>Home</li>
<li>New post</li>
<li>About</li>
</ul>
</nav>
<aside>
<form id="newsletter">
<h2 label for="newsemail">Newsletter signup</h2 label>
<input type="email" name="newsemail" placeholder="Enter email..." required>
<button type="submit" class=submitbutton>Submit</button>
</form>
</aside>
<article>
<section><h1>Post 1</h1>
Lorem ipsum dolor sit amet
<br>
<span class="commentlink">
View comments
</span>
<hr>
</section>
<section>
<h1>Post 2</h1>
Lorem ipsum dolor sit amet
<br>
<span class="commentlink">
View comments
</span>
<hr>
</section>
<section>
<h1>Post 3</h1>
Lorem ipsum dolor sit amet
<br>
<span class="commentlink">
View comments
</span>
<hr>
</section>
</article>
CSS
header, footer, nav, article, aside{ display: block; }
#container{ border-radius: 20px; background-color:#97C02F; padding:10px 50px 30px 50px; margin:0px auto; width:880px;
overflow:auto; }
aside{ float:left; width:150px; padding-right:15px; color:red;
margin-top:15px; }
article{ float:left; width:660px; margin-left:20px; }
section{ font-family: 'Droid Sans', sans-serif; color:#FFFFFF;
font-size:15px; font-weight:normal; }
I haven't inserted all of my code, but think I've put the necessary bits in.
You can use html { overflow-y:scroll } to force a scrollbar, even if the content doesn't need scrolled, so this jumping doesn't occur.
HTML syntax that can be used in your CSS class to handle any exceeding in your container or div; etc.
This code give you an access to a scrollbar when it is necessary.
.of{overflow:auto}
I'd like to position something relatively absolutely, e.g. taking it out of the document flow and adjusting its position a few pixels. What's a neat way to do this?
Just use margin to shift the absolutely positioned element.
HTML:
<p>Lorem ipsum dolar sit amet.</p>
<p class="move">Lorem ipsum dolar sit amet.</p>
<p>Lorem ipsum dolar sit amet.</p>
CSS:
p.move { color:red; position:absolute; margin:5px 0 0 5px; }
Demo: jsfiddle.net/KXCkV
You could put your relatively positioned item within an absolutely positioned container and use top, left, right, or bottom to move it wherever you need to.
This is an example of what you need to do:
<div style="position: relative; width: 500px; height: 200px;">
<div style="position: absolute; left: 0; top: 0;">Upper Left</div>
<div style="position: absolute; right: 0; bottom: 0;">Lower Right</div>
</div>
Only way I could think to do this is to have the element styled in the document on page load and then finding its position and changing the style to position:absolute, setting the top: and left: properties programatically based on it's original location.