Right banner margin CSS - html

On the site: ukrainiansecret.com
I would like to get rid of that green right margin of the banner, and to have it exactly as the left side. Have tried to stretch the banner width but it didn't work out.
Thanks

The quick and dirty way I did it was add a width:100%; to the div.banner_main, ul#portfolio, ul#portfolio li and ul#portfolio li img - that will make the image stretch all the way across the screen.
Example:
div.banner_main,
ul#portfolio,
ul#portfolio li,
ul#portfolio li img {
width:100%;
}

Related

navbar will not align left

Pretty self explanatory. I've spent hours messing around with the code...and cannot get the multicoloured navbar to align to the left to match rest of the content.
As you can see...there's a small gap on the left of about 20px. I have no idea what's causing it.
I would like the green menu button and top navbar to move slightly to the left where the grey header starts.
I've tried adding the following to menu styles #session:
margin-left:0;
left:0;
padding-left:0;
doesn't work!
Fiddle
ul has padding, that comes into play by default
Remove padding from #session
use
#session{
padding:0;
}
you just need to take the padding off
#session{
/* other styles */
padding-left: 0;
}
use
#session{padding-left:0}
DEMO

my nav and div won´t be a side, don´t know what's wrong

At this link:
http://thom239u.keaweb.dk/help/mit.html
i have a div called main (black border) and a nav (red border)
i have tried everything, why ain´t they a side
when they are empty they are side by side,
but when i put something in them they split.. ?
i tried to erase it all and start from beginning again, but wont help..
![enter image description here][1]
i'm trying to get i nav a left an a div box where i can change what's in it.
Please add
vertical-align: top; to #main
You should use float:left;
You can add that to the <Nav> and <Div id="main">
You're looking for
vertical-align:top;
Additionally, under the standard box model, they will not correctly align side by side at lower resolutions if you use width % and have a border/padding. You are using width:10% and width:89% for each element, I'm assuming you were trying to make them fit and 10%/90% wasn't working.
If you apply box-sizing to each of the elements, it will take into account the extra width allocated to borders/padding of that element, and allow you to simply state 10% width & 90% width.
You need only vertical-align to #main, since display:inline-block elements need to be aligned.
#main{
vertical-align:top;
/* other styles*/
}
whats-the-deal-with-display-inline-block

CSS: position of a image in a header

i am trying to position a logo in the middle of a the header, and push it to the buttom.
I got a problem with firefox size (px , em, %) sizes when the image is in the buttom of the header in chrome and IE9, in fire fox it getting out of the border (overflow?).
is there a way to position the image or any object for that matter in the buttom of div in all the browsers?
here my code, mybee it will give you idea what im doing worng:
css:
#header
{
background-image:url("../images/roundShapBrickWall.jpg");
background-repeat:repeat-x;
position:relative;
width:inherit;
height:14.1em;
}
#header img
{
position:relative; // <--- somewhere here i think is the problem.
width:50%;
top:17%;
}
info: this is the position i want it to have, it sits in the middle and the buttom of the header, but in firefox in getting out of the border of the header.
any ideas?
Have you tried: "position:absolute;bottom:0;" to your "#header img"?
You can avoid using position:relative and position:absolute by setting in #header section text-align: center and adjust image position with margin. Also vertical position can be set with margin. But this would only work if you don't have other content in header.

CSS HTML : my drop down menu li is cutting off an image height

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.

Navigation styling help

I am having trouble with my navigation menu, I have some li that are floated left of each other, and each li has a back ground image set to the right to give a seperation effect, within the li I have a a that is text aligned center.
On hover I have a bottom-border but I need said board to span the full width of the li not the a is this possible?
Here is a fiddle of my current attempt,
Fiddle
The following CSS should do the trick:
header nav a { width:100%; }