I haven't developed much in HTML/CSS in some time and was looking at some old code and came across the following:
CSS:
#menu{
float: right;
height: 80%;
vertical-align: bottom;
}
.filler{
float: right;
height: 50%;
}
p.clear{clear: both; height: 0; margin: 0; padding: 0;}
HTML:
<div class="filler">
<p class="clear"></p>
</div>
<div id="menu">
<p class="clear"></p>
</div>
These div classes are nested inside a banner div and lie in the top right corner of the screen. Without the <div class="filler"> the menu div no longer lies within the banner div, nor at the top right of the screen. What is going on? I want to design a webpage with as little nested divs as possible. Is there a way to accomplish this same functionality without having a div that contains nothing but height?
I think the old trick here is on the p.clear having 0 height. I kinda see whats going on tho you're excluding alot of variables. Anyway. If you want a prematop right menu you could try something like :
#menu{
position: fixed;
top: 1em;
right: 1em;
}
Related
So,
i'm guessing this has been asked before but im realy missing something here which i've been starring myself dead at for the last hour.
I've got a container with two divs, position relative and absolute since i want them to stack. The stacking part works. However, this container, the #mockupcontainer, needs to be inside the #what-container-inner which i cant seem to get to work. At the moment it just stops the #what-container-inner and placed the #mockupcontainer after it. My jsfiddle illustrates perfect whats going wrong. I hope someone can help me on this one.
https://jsfiddle.net/rvq41vaf/
CSS:
#what-container-outer {
background-color: #ececec;
margin-left: auto;
margin-right: auto;
}
#what-container-inner {
background-color: #ececec;
width: 75%;
margin-left: auto;
margin-right: auto;
position: relative;
}
.mockupcontainer{
position: relative;
}
#pin-mockup{
position: absolute;
z-index: 10;
}
#pin-mockup-site1{
position: absolute;
z-index:11;
}
HTML Code:
<div id="what-container-outer">
<div id="what-container-inner">
sdfsdfsdfsdfsdfsdfsdfsdf<br>sdfsdfsdfsdfsdf
<div id="trigger-mockup"></div>
<div class="mockupcontainer">
<div id="pin-mockup">
<img src="image2" class="img-responsive" alt="Realiseren">
</div>
<div id="pin-mockup-site1">
<img src="image1" class="img-responsive" alt="Realiseren">
</div>
</div>
</div>
</div>
Kind Regards,
Donny.
Since you have your two image-containing divs (pin-mockup and pin-mockup-site1) positioned absolutely, they are pulled out of the flow and the enclosing divs no longer leave room for them. The solution is to set the larger one to position: relative so that the enclosing div does make room for it. Setting top:0 on the second (absolutely positioned) div brings it to the top of the enclosing div.
Here's the fiddle.
See also the MDN docs on the position property.
Embarrassingly, I'm having trouble making one div (of any length) centered and one div (of any length) floating on the right. So I have a container with menu buttons that are centered and a link to the users control panel on the right. It should look something like this
----------------------------------------------------------------------------
| |----Menu Items----| |--ControlPanel--|
----------------------------------------------------------------------------
I know, this question has probably been asked a few times but I've searched through and through and they all seem to rely on percentages or fixed widths.
I have a container
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
float:right;
}
The html is like this
<div class="container">
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
<div class="controllinks">
A link the users control panel
</div>
</div>
By changing menublock and controllinks to display:inline-block (or inline) I can get them on the same line just fine. .menublock does not seem to like being centered in this display and margin: 0 auto; doesn't work. I was messing around with .menublock display:table but that didn't want to stay on the same row.
Maybe it was too easy so you didn't even try it, but this fixed the thing in my test file: Just swap the order of <div class="controllinks"> and <div class="menublock">:
<div class="container">
<div class="controllinks">
A link the users control panel
</div>
<div class="menublock">
<span class="menuitem">Streams</span>
<span class="menuitem">Profile</span>
<span class="menuitem">Friends</span>
</div>
</div>
An easy solution is to use absolute positioning.
.container {
height: 50px;
width: 100%;
padding: 10px 10px;
/*this makes the child divs relative to the parent*/
position:relative;
}
.menublock {
width: 200px;
margin: 0 auto;
padding: 0;
}
.controllinks {
/*this puts the controllinks on the right.
Be warned, that if the page is too small, controllinks can no overlap on menublock.
This can be fixed with media queries.*/
position:absolute;
right:0px;
}
Both Merlin's and James' solutions worked well. They all achieved the same result.
Another solution I just found was adding text-align: center; to the .container class. It turns out inline elements respond to text-align (although it seems strange to think of divs in this way).
So, i'm super new to HTML/CSS. For my class I have to make a portfolio webiste.
I want to be very simple. So, I'm starting off with my name centered in the middle of the page, and then underneath I want it to look like this:
About Graphic Design Studio Art (but, spaced out a little obviously)
Here is my html:
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
</div>
<div id="indexheader"><a rel="title">THIS IS MY NAME</a>
</div>
<div id="links">
<a rel="#about">About</a>
</div>
<div id="links">
<a rel="#design">Graphic Design</a>
</div>
<div id="links">
<a rel="#art">Studio Art</a>
</div>
</div>
</div>
<!-- END: Sticky Header -->
Here is my CSS:
/* Make Header Sticky */
#header_container {
background:transparent;
height:60px;
left:0;
position:fixed;
width:100%;
top: 40px;
text-align: center;
}
#header {
left: 0;
position: fixed;
right: 0;
text-align: center;
top: 160px;
z-index: 999;
float: right;
}
body.top-navigation-position-below-banner #navigation-bottom {
position: fixed;
top: 0;
border-bottom: none;
z-index: 999;
}
#page-header-wrapper {
margin-top: 180px;
}
#links {
height: auto;
width: 100%;
margin-top:30px;
background-color:transparent;
text-align: center;
margin-top: 10px;
margin-left:0%;
padding: 0px;
}
http://jsfiddle.net/r7K26/
I also tried to make it a sticky-header. Not sure if that's right either. IM A HUGE NOOB. Forgive me.
You are closing your div with id #header immediately, so the elements beneath is are not receiving any styling. That might be what you want, but then you have an extra at the end of your html.
You can center your div a lot of ways, but the following should work fine:
#indexheader {display:block;width:100%;text-align:center;}
Good luck!
Well, you don't need that many divs first of all. Look at this, for example:
Html:
<div class="myInfo">
<h1>Your Name</h1>
<ul class="myLinks">
<li>link</li>
<li>link</li>
<li>link</li>
</ul>
</div>
And actually, you don't even need a div in this case but regardless, having the class on one div you can style with selectors such as:
.myInfo H1 {....}
.myInfo UL {..}
etc
or just
.myLinks {} for the url and then:
.myLinks li {} for the list items.
I know this is a fast answer but as you are learning, I think it might be better to 'sort of' give you some pointers instead of just doing it all, right?
:)
You're very close, and here's one solution using your code as a base. Try this styled JSFiddle and see if its what you need. Please feel free to play around with the code, and hit the Run button when you are ready to see the results. http://jsfiddle.net/TalkingRock/MAuzN/
The structure:
The html code is simplified by using "header_container" to wrap the entire header (title and menu). The "indexheader" is placed in its own div. A new menu div now contains/wraps only the menu items.
<div id="header_container">
<div id="indexheader">THIS IS MY NAME</div>
<div id="menu">
<div class="links">About</div>
<div class="links">Graphic Design</div>
<div class="links">Studio Art</div>
</div> <!-- end menu -->
</div> <!-- end header_container -->
The CSS
Inline-block is used to shrink wrap, center, and display the menu items in a single line. Inline-block has a natural 4px margin around each item, and that can be removed by removing the white space in-between each inline-block item in the html code. You'll also need to add "vertical-align:top". Inline-block is a good style to learn, has good browser support, and comes in handy.
#header_container {
margin:0px;
padding:0px;
border:0px;
min-height:80px; /* use min-height so the div will expand around the contents, regardless of height. */
width:100%;
background-color:transparent;
position:fixed;
top:40px;
}
#indexheader {
text-align:center;
padding:10px;
}
#menu {
text-align:center; /* text-align center works because of the inline-block */
}
.links {
display:inline-block;
vertical-align: top
}
Good article on lnline-block: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
Inline-block support: http://caniuse.com/#feat=inline-block
Here are a few other articles you'll find useful. CSS Fixed Menus:http://www.w3.org/Style/Examples/007/menus.en.html
The Z Index: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
Note: The div that holds your contents needs a top padding or margin tall enough to make sure it isn't covered up by the fixed menu. Position fixed will be buggy in touch devices, especially handheld phones. In your original code there is an extra div in your html, id's can only be used once per page, use href for your links, and "backgound-color:transparent" (transparent is the default style).
I'm making a responsive web design. But my CSS knowledge could have been better. I want a padding on a div, but I don't want it to affect the title.
See this example:
I want the title to be were it is, but the little squares to have a margin at the left side.
I've tried to set a padding and then reset the title position with relative positioning. But I don't like that solution because the title is pushing the squares more than necessary.
I've also tried to set a div where the cross is, but I can't manage to get it under the title and on the left side of all squares since the title is floated left and the squares right.
Here is a fiddle
HTML
<div id="siteContainer">
<div id="titleContainer">
<h1 id="title">This is the long title</h1>
</div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
// more...
</div>
CSS
#siteContainer {
max-width: 800px;
margin: auto;
}
#title {
display: inline-block;
}
#titleContainer {
height: 100px;
margin: 10px;
float: left;
}
.image {
width: 100px;
height: 100px;
margin: 10px;
background: #DDCCAA;
float: right;
}
Whatever you want the padding on the left of the container to be (100px), you can set as a negative text-indent value on the title (-100px).
Did you think about the box model? Do some research on CSS box model and you will see where your problem is.
Let me give you an example:
If you have a div with the width of 100px and add a padding of 10px, the width of your div will be 120px, both sides will take 10px from the padding, you can solve this in two ways, one is to make the div width smaller "80px" and the second is to use box-sizing: border-box;
Hope this helped.
I'm designing a pretty simply website for a friend. In the design, he wants a ribbon to stretch out horizontally in the middle of the page.
Like so:
https://i.imgur.com/Hz4SH4Hh.png
My attempt at doing this was to crop the 'ribbon' parts of the right and left and display those images while floating them to the right and left. Then creating a content div, centering it to fill in the middle of the ribbon. This solution is super sloppy and doesn't work well at all. Here's a picture of it
https://i.imgur.com/66C2kj5h.png
The resolution is kinda off, but you can see that the border of the middle div are off, and when stretching or shrinking the page, the percent width of the middle div messes the whole thing up.
Heres my HTML/CSS
<div class='ribbon-container'>
<div id='ribbon-left'>
</div>
<div id='ribbon-right'>
</div>
<div class='clear'></div>
<div id='ribbon-middle'>
</br>
<center>
<span class='ribbon_header'>Food Around Your School</span>
</center>
</div>
</div>
.ribbon-container { width:100%; height:118px; position:relative;}
#ribbon-left { background-image:url('images/ribbon_left.png'); width:117px; height:119px; position:absolute; bottom:0; left:0;}
#ribbon-right { background-image:url('images/ribbon_right.png'); width:117px; height:119px; position:absolute; bottom:0; right:0;}
#ribbon-middle { width:85%; height:81px; background-color:#b5b5b5; border:7px; border-top-style:solid; border-bottom-style:solid; border-color:#61615f;top:0; margin:0 auto;}
You're just gonna have to size everything in the same units. I'd suggest just using pixels unless you're going with a responsive design, and if you're going with a responsive design, I'd suggest using something like foundation.js.
Edit: and +1 to Michael Peterson's SVG idea. That's a good one too.
Perhaps try setting
.ribbon-middle{
width: auto;
padding: 0 120px;
}
where ribbon's padding is the width of the left/right images. then you will have the text always visible.
Since the height of the banner is not changing, you can accomplish this using by using a horizontally-repeating image as the background for the banner and then using absolute positioning for the left and right portions of the banner.
The html becomes:
<div class='ribbon-container'>
<div id='ribbon-left'></div>
<div id='ribbon-right'></div>
</div>
And the css becomes:
.ribbon-container {
width: 100%;
height: 120px;
position: relative;
background: url('http://i.imgur.com/LVXiQ37.jpg') top left repeat-x;
}
#ribbon-left {
position: absolute;
top: 0;
left: 0;
width: 112px;
height: 120px;
background: url('http://i.imgur.com/2MOcrO9.jpg') top left no-repeat;
}
#ribbon-right {
position: absolute;
top: 0;
right: 0;
width: 97px;
height: 120px;
background: url('http://i.imgur.com/Q6NmXR6.jpg') top left no-repeat;
}
I've done a really crude mock-up using the initial image you posted. The problem is that the image itself is not perfectly horizontal, so it looks like the right side does not line up in my fiddle, but if you are more careful in creating the initial image, this will work. And I haven't added text, but this can be done using absolute positioning as well, or another method I'm sure.
You can see the example at: http://jsfiddle.net/M3GmY/