Here is what it looks like:
I'd like to have the picture and the name be in the same line as the header... Without having to do manual margin-top...
Just to note... I am using Bootstrap.
http://getbootstrap.com/
Here is the HTML code...
Here is the CSS code...
.navbar-top {
height: 64px;
background-color: #772A75;
position: fixed;
width: 100%;
min-height: 64px;
top: 0;
left: 0;
z-index: 1000;
box-shadow: 0px 2px 10px #888888;
}
.navbar-container {
padding: 0 20px;
}
.navbar-heading {
margin-top: 10px;
}
Just set float: left for the left heading and set float: right for the right image block.
You can move the dropdown-toggle after the h1 tag, make sure to add display : inline-block to both of them. you might have to play with floats and width to get them the way you want...
Related
I am building a webshop with on the left side a sidebar with a sort of navbar in it.
But the background (color Brown) has to fill the whole left side, but if my page is longer it covers not the complete left side.
This is my CSS for the background:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 115%;
max-height: 200%;
background: #C6A970;
}
Does anyone have an idea how to cover the left side of my webpage?
Thanx in advance!
according to the informations you gave you probably search something like that:
Fiddle
Your provided css already shows that your code must be messy, using float and position absolute together is weird and your min-height and max-height are over 100%.
We could help a little better if you provide full code.
Please try this:
Use this css:
.sidebar {
z-index: 10;
border-top: 2px #000000;
position: absolute;
float: left;
left: 0;
bottom: 0;
margin-top: -5%;
padding-bottom: -10px;
width: 15%;
min-height: 100%;
background: #C6A970;
}
or refer to the jsfiddle link below:
https://jsfiddle.net/89f074ke/1/
Got an issue where I'm trying to have text stay centered in the middle of a div that's on top of an image. Looks good on desktop but once I start to attempt to make it mobile, it gets screwed up. I think it's because I'm using fixed heights in the div but I tried height:auto; and all that did was place the text to align to the top because it has no idea what the div height really is. Anyone know a better solution to this?
First here, here's the site in question: http://originalchuck.com/
It's in the middle of the page. The three large images.
Now, here's the CSS I'm currently using:
span.text-content, div.homepage-bags span.text-content-bags { color: #fff; display: table; font-size: 30px; left: 0px; position: absolute; top: 0px; text-shadow: 2px 1px 3px rgba(0, 0, 0, 0.5), 0px 1px 3px rgba(255, 255, 255, 0.5); text-transform: uppercase; width: 100%; }
div.homepage-featured span.text-content { height: 620px!important; }
div.homepage-buckets span.text-content { height: 288px!important; }
div.homepage-bags span.text-content-bags { height: 288px!important; }
div.homepage-featured span.text-content span, div.homepage-bags span.text-content-bags span { display: table-cell; text-align: center; vertical-align: middle; }
Don't use height !important for each span.text-content. It should work fine just with height: 100%; here.
Also remove display: table; from span.text-content, we'll center inner span absolutely.
For inner span:
span.text-content span {
position: absolute;
top: 50%;
left: 0;
width: 100%;
margin-top: -12px;
text-align: center;
}
Text in the hover layer is short, so we can expect that it will never wrap. This means that useing top:50% with matgin-top minus half of text height is ok for vertical centering.
Also you'd better set display: inline-block for tag a here as there is an issue with overlay width on the first image on mobile.
After many tries, i've come to a possible solution for you. Use this CSS on your span.text-content :
display: block;
height: 0 !important;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
line-height: 0;
text-align: center;
And unwrap your text out of its span so you just have your naked text inside your span.text-content
Basically, the margin: auto causes the browser to resolve the conflicting height properties (100% given by top: 0; and bottom: 0; and the height: 0; and use the specified height (here, 0) and center it inside the container from the specified positions.
PS: The !important was solely here to override the heights you had hard-coded.
my client has added an image to their WordPress header. I am having difficulty (I'm still learning CSS) getting the image to align where we want it.
This is the site here
You can see the Options House graphic on the right. I want it to be to the right of the word "stocks" in the tagline. Help?
====Edits based upon suggestions below====
#Beardminator made a suggested answer, but this is what the site header looked like after including that code:
Relatively position that options_house div like so:
#options_house {
float: right;
position: relative;
top: 40px;
left: 52px;
}
And take off the overflow hidden from the header class.
Here is the 2 div which you should replace with this code:
.slogan {
color: #EBEBEB;
font-size: 17px;
left: 200px;
line-height: 25px;
position: absolute;
text-shadow: 0 2px 4px #0F243E;
top: 59px;
}
.logo_mmj, .logo_mmj:visited, .logo_mmj:hover, .logo_mmj:visited:hover {
background: url("../images/logo_marijuana.png") no-repeat scroll 0 0 transparent;
display: block;
float: right;
height: 95px;
position: absolute;
right: 0;
text-decoration: none;
top: 23px;
width: 392px;
}
You need to put the logo to the right, so the .logo_mmj should contain
right:0px;
Or if you use position:relative;
You can use like this:
.logo_mmj
{
position:relative;
float:right;
}
update:
The site you linked have very different logo that's why It only made it worse. You only need to adjust
.slogan left property. And add
to .logo_mmj div top:30px or much more.
Please check this page: http://badadesigns.com/work438/
Here at the top of the page there are social media icons but they are not aligned to the right side of the page. When I am resizing the browser page then the alignment is changing.
I am really not sure what code is being used, but I think this is it:
#logincont {
width:330px;
float:left;
margin-left:1145px;
}
Can anyone please help me with the alignment so that it is fixed and set along the right side border of the page?
div #logincont is set to float:left and has a huge margin-left which is unnecessary.
It should be float: right without margin, like this
#logincont {
width:330px;
float:right;
}
Update : If I understand correctly, you want the social media icons to be aligned on the right but not further than the content of the site.
Try this :
#logincont {
width: 940px;
text-align: right;
margin: 0 auto;
}
width is set to the width of the #content div, the content of #logincont is aligned right and #logincont itself is centered on the page with margin: 0 auto
If you are trying to get all of the content to stay within view try fixing this:
#logincont {
postition:absolute;
right:2px;
}
You could try this:
#logincont {
width:330px;
float:right;
}
Based on your requirements and the type of element you might need to add more properties.
Not sure what you're looking for specifically, but try this:
#login {
background: #113240;
color: #DDD;
height: 30px;
padding: 8px;
position: fixed;
z-index: 3;
top: 0;
right: 0;
left: 0;
}
#logincont {
width: 330px;
position: fixed;
right: 0;
}
#header {
background: white;
border-bottom: 1px solid #EBEBEC;
padding: 4.429em 0 0;
position: relative;
z-index: 1;
}
Click here for visual
As you can see from the picture, my parent container is not expanding to fit my child container. The page container (#contain) actually stops at the bottom left hand corner of the kitchen photograph. The child container (#zone2) is clearly overflowing outside its parent container (#contain). I would like to be able to have (#contain) expand automatically to fit (#zone2). The CSS is:
#contain {
position: relative;
width: 100%;
margin: 0 px;
background: #E3DCCC;
z-index: 0;
}
#zone1 {
width: 100%;
height: 850px;
background: url(http://waly1039.com/sites/default/files/k4.jpg) no-repeat center top;
position: absolute;
z-index: -1;
}
#head {
position: absolute;
top: 20px;
width: 100%;
height: 330px;
}
#head img {
max-width: auto;
height: auto;
}
#zone2 {
position: relative;
overflow: hidden;
padding: 3px;
top: 360px;
float: right;
right: 15px;
width: 53%;
height: auto;
border: 4px solid #715E40;
background-color: white;
}
#zone2 img {
max-width:100%;
height: auto;
float:left;
margin: 5px;
}
#zone3 {
position: relative;
top: 710px;
left: 15px;
float: left;
height: 340px;
width: 38%;
border: 4px solid #715E40;
background-color: white;
}
This is a float issue. Try adding the traditional CSS clear fix to #zone2's container:
.container:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
Be sure to put this in the :after pseudo selector, otherwise it won't work for you. Floated elements exist outside of normal document flow, which is why the container isn't expanding to contain them. The clear fix forces the floats to be cleared, which will cause the container to expand around the bottom of this element.
I tested adding more images to #zone2 and #contain expands vertically. Somehow you've got an element(s) in #zone2 with padding or margins that aren't being added to the parent's total height.
If you want a quick fix in order to move on then add margin-bottom: 30px; to #zone2.
I've duplicated your problem and was able to resolve it with this: You might want to try it. It's looks a bit odd so make a class for it if you like. I'm more concern with where it is placed.
Just beneath lines of your code, add my third line. Just that and you are done. Note, it more about positioning.
<div id="zone3"></div>
<div id="zoneclear"></div>
<br style="clear:both; float:none; display:block; height:1px;" />
Just add the third line.
and just modify one of your styles:
#zoneclear {
clear: both;
float:none;
display:block;
height: 30px;
position: relative;
}
[EDIT]
The codes have a serious bug in firefox which is not present in Google Chrome (that I tested in earlier due to your relative positioning. So I've modified the #zoneclear style to fix that. You might have to test if the other browsers like this hack.
I hope it helps you