I am currently working on a website that uses this navigation bar.
I didn't include it in the picture for the sake of space, but the brown portion stretches to both edges of the page. How can I stop this from happening?
This is my HTML within the page:
And this is my CSS:
Thank you!
#navbar {
display: inline-block;
}
You can also add a width attribute to define exactly how wide you want it.
this might help
width:400px;
margin:auto;
Related
I'm creating a navigation bar and I want the text, which is going to be on the right, to be inline with the end of the image. I want it to stay aligned and in position regardless of whether the window is resized or not.
I've included an image incase I haven't explained it very well:
http://i.stack.imgur.com/QWR6L.png
Hopefully you guys can help!
Is this something that you are looking to achieve ?... http://jsfiddle.net/65fBD/ Now the way i achieved it is to float the image to the right and wrap the image and the links inside a div and give it a min-width attribute. what this does that as soon as it hits the minimum width specified in viewport, the division will not shrink after that thus maintaining the inline look.
here is the css
#navcontainer {
width:100%;
min-width:400px;
height:40px
}
#image {
float: left;
}
#links {
float:right;
}
and the html...
<div id="navcontainer">
<img src="http://dummyimage.com/230x40/123dfe/fff" id="image"/>
<p id="links"> Link | Link | Link </p>
</div>
But on another note, please clarify what you mean by if window is resized the link should stay aligned....are you referring to responsive design?
I didn't really know how to word this question, but anyway, My website
kind of looks rather weird at the moment. I had it looking perfectly well, however i changed it due to the fact that the Footer was taking up the whole main section of the page (and i wanted to add color variations between the footer and main section).
So what i would like to know is how do i get the Main Area Text background color cover everything from the navbar to the footer (as wide as the navbar also)? I would make change it to using pixels, but wouldn't that mean to much guessing as you decide to change it? Surely there is an easier way!
Thanks to any help provided
Code:
.mainsection{
float:left;
width: 660px;
margin:30px;
background-color:#999;
}
.center{
background-color:#999;
}
HTML:
<div class="center">
<section class="mainsection">
<p>Main Area</p>
</section>
<aside class="sidenews">
This is the side news
</aside>
</div>
How about:
html {
background: #999;
}
or
body {
background: #999;
}
?
Another thing you can try is wrapping all the areas you want a certain background color in a div, then set that div's class and do a background color property in that class. You'd have to remove background color property from the rest of your classes for this to work. You can further control it with !important.
try this ; create one new class for all main page like .center and add below styles in that i hope this is help you.
body{background:#999;width:100%;height100%;}
.center{margin:auto; width:960px;}
As you can see here: http://www.responsinator.com/?url=www.vaneldijk.nl there is an extra space on lower resolution devices. I've tried using firebug and webmaster toolbar to figure out what is causing this to happen but so far no luck. The CSS can be found here: http://www.vaneldijk.nl/sites/all/themes/prestige/css/style.css.
I've build tons of responsive websites without this problem so hopefully someone can help me out.
Change this it makes the page 100% width.
#wrap .inside, #footer .inside {
text-align: left;
width: 100%;
}
After a lot of testing I finally found the solution. Make sure your wrap elements (so your direct elements in your body) have an 'overflow: hidden' declaration in your css. So for example this your HTML:
<body>
<div id="wrap">Your website content</div>
</body>
Your CSS should look like this
#wrap{
overflow:hidden;
}
This will remove the weird space in Opera.
learning html/css here. I can't seem to understand how to tweak this drop down menu. I'm trying have to tweak it to hold an image and a name, then to have the links.
Right now the image is getting cut off due to the <li> height, when I change the <li> height to 100% it get some weird behavior that I don't understand. Any help would be really appreciated to learn whats going on.
image getting cut off
http://jsfiddle.net/FyU89/
odd behavior after I add height: 100%
.menu ul li ul li{
padding:0;
float:none;
margin:0 0 0 0px;
width:100%;
height: 100%
}
http://jsfiddle.net/FyU89/1/
Add to your css
ul.menu-drop li {
display: inline-block;
}
Fiddle link
Update:
Upon adding the new css rule you'll find the name disappears from next to the image on Chrome, at least it does for me. To fix that add a float: left on your image and the name will appear next to the image on Chrome, Firefox, and IE; you can then style it more to your liking. Fiddle link with the float change.
just going through your css and code, it appears that these drop downs would inherit the height from their parent (.menu), which is set to 30px. the images seem like they are set to have a height of 48px; this maybe causing your cutoff.
Add this to your css code:
ul.menu-drop li {
height: 50px;
}
That sets the height of your list within the menu-drop menu thing so its big enough for the picture.
There is an horizontal scroll bar on my homepage only (http://balloonup.com) and a black border appears on the right?
How is it possible? Thank you for you help
Here is the new solution. Add the inline style float:none to the highlighted element.
in oldcount.css
.home_count {
display: block;
margin: 0 auto;
width: 420px;
}
remove the width
The black "border" is actually the background of your page (#28292B, defined in stylehome.css for the HTML tag). Your problem is that the width of the <BODY> only depends on the window size, not on the content of the elements contained within. You can force the to the minimum width of the page using:
body { min-width: 930px; }
Alternatively, if you want IE6 / Opera 6 support (they don't support min-width) you need to add a dummy <DIV> to force the page width. You can use this as the very first <DIV> of your document:
<div style="position:absolute; top:0; left:0; width:930px; height:1px"></div>
However, there is another problem that stretches your content more than needed and this is caused by that questions counter on the right side. You can fix that by removing that "width" property from the .home_count rule as it's useless.
You may also revise that double .home_count .comma rule as this seems like an error to me.
Anyway, by applying those two modifications described above your page looks fine on FF4 whatever window size (except for the "Log in" button covering the phone number, but that's out of the scope of this question).
In reset-fonts-grids.css, find all the instances of float:right and replace them with float:none.
Try using this:
body{
margin-right:-50px;
}