I want to make big picture like this:
So just big picture, with big letters on it. I'm a newbie so please understand me, thanks! also how do i put big letters like that?
If someone would put it in.zip for me to examine that would be even better! Thanks in advance!
thats called the jumbotron
http://getbootstrap.com/components/#jumbotron
or
<div class="bigpic">
<span class="bigletters">Big Letters</span>
</div>
css
.bigpic {
postion:relative;
width: 100%;
height: 200px;
display: block;
background: url('www.pictureUlr.com');
}
.bigletters {
position: absolute;
display: inline-block
top: 40px;
left 40px;
font-size: 3em;
color: white;
}
this places a div under the menu with a width of 100% and a fixed height.
Then makes an image the background of said div. It also puts a span inside (or think on top) of that div because it is absolutely positioned
Related
For a simple landing page I wanted to let some text box overlap an header image. To make it simple, I just have a structure like:
<header>
<img src="path/to/img.png" />
<h1>Awesome headline</h1>
</header>
All elements are set to display:block and the h1 is dragged inside the image with a negative margin. I also gave the headline some padding and background:white.
Now the problem: The headline text is shown on top of the image but the background colour is behind it! You can see an example here: https://jsfiddle.net/cv12evLn/
My guess is, that a browser renders all sibling blocks in layers, starting with all backgrounds and borders, then rendering images (img-tags) and finally text on top of everything else.
Is that right? And why the actual… I mean, that seems crazy unexpected to me.
To solve the issue, I've put the headline in a wrapper and set this to position:absolute. See here for a live example: https://jsfiddle.net/f5sd1u6o/
Use position:relative rather than negative margin. Then the z-index works automatically.
#container {
width: 500px;
height: 300px;
margin: auto;
}
#container img {
display: block;
width: 100%;
}
#container h1 {
display: block;
width: 50%;
height: 1em;
margin: auto;
padding: .5em 1em 1em;
font-size: 3rem;
background: yellow;
text-align: center;
border: 1px solid red;
position: relative;
top: -4.6rem;
}
<div id="container">
<img src="//placekitten.com/500/300">
<h1>
headline
</h1>
</div>
To get the Z-index to work, you need to apply position:relative anyway but you can still use negative margin if that is a design requirement.
JSfiddle demo (with negative margin)
Basically, backgrounds are rendered first before anything else (as I understand it) so they always come at the bottom of the stacking order. You just need to create a new stacking context and changing the position property does that.
As it happens so does changing the opacity of the element so a quick fix is to set opacity:.9999;
JSfiddle Demo (opacity 'hack')
I'm creating a basic generic web page with a photo gallery as practice here, but for some reason I cannot get the gallery div to float next to the sidebar div so that there isn't a big empty space above it. Floating them just destroys everything. When I inspect element it shows that there's a margin taking up all of the space to the right of the sidebar/above to the gallery, but I've looked through my css over and over and can't find where that margin could be coming from. I'm not 100% sure that's what is causing the issue though.
If anyone knows how I can make this position correctly it would be much appreciated. I feel like I've tried everything and I'm just not getting it.
Here is the link to the code on jsfiddle:
https://jsfiddle.net/laurynm/h6mu6hsb/
.gallery {
width: 80%;
position: relative;
}
#sidebar {
position: relative;
width: 230px;
}
Try this https://jsfiddle.net/h6mu6hsb/4/
#sidebar {
float: left;
position: relative;
width: 230px;
}
I took a stab in the dark, and made a jsfiddle demo for you to try out. In essence, I gathered different sections in wrappers, converted them to inline-block, and hope it looks kinda like what you wanted.
How about something like this so you dont have horizontal scrolling problems:
http://jsfiddle.net/espriella/fdmdwpp5/
Using display as table-cell
.sidebar{
min-width: 200px;
display: table-cell;
}
.gallery{
display: table-cell;
width: 100%;
}
I'm trying to create a sticky searchbox so that it's always at the top of the page when you scroll.
However, I'd like it to take up 100% of the container, not the window.
Here's an HTML markup example:
<div class="container">
<div class="searchbox">
Search Box
</div>
</div>
and the CSS:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
overflow-x: hidden;
}
.searchbox {
background-color: red;
position: fixed;
width: 100%;
}
Here's a fiddle with what's currently happening: http://jsfiddle.net/09ynr879/
I'd like it to be indented on the right side by the same amount it already is on the left. Any way to fix this? I'd like to be evenly in the center with the same margins on the left and on the right.
Thanks in advance.
Here's a screenshot of the actual site where we're having the problem:
http://s2.postimg.org/dlj47yqix/Screen_Shot_2014_10_06_at_11_08_24_AM.png
Notice how the searchbox starts at the right place but ends at the end of the page, not at the end of the container. We're using Bootstrap 3.2
Elements that are position: fixed have no relative parents. They are always going to be fixed relative to the page.
If it's no problem to you, remove position: fixed; from .searchbox and add it to .container
It's not possible, the fixed position get's out of the flow.
But an alternative solution:
.container {
background-color: blue;
width: 300px;
padding: 20px;
height: 40px;
position: fixed;
}
.searchbox {
background-color: red;
width: 100%;
}
http://jsfiddle.net/09ynr879/4/
Position fixed is always of the entire window. If you want to do it for just a container, you need JavaScript.
I think what you are looking for is either:
StickyMojo or jQuery Stickem
Bootstrap has a similar thing, called Affix.
I have an absolute positioned div. Inside this div there is an image and underneath it, a caption. Now I want the caption to break to new a line if it reaches 95% width of the image.
But I can't get it to work. The text (no matter what width I say), always moves the image to the left like it would have no breaks.
I made a fiddle for this:
http://jsfiddle.net/hw7t7xyn/1/
The image is set to
right: 0;
top: 10px;
But since the text is too long it moves to the left.
Also the div.caption does not seem to adopt the parents div width.
Can anybody help me out here? Maybe it's a problem of the HTML setup or the CSS, I have no idea anymore, but it's driving me crazy.
Update: Sorry, I did forget to mention that I don't know the dimensions of the image. Is there a possible way to do this without javascript?
I think you just need to add a width to the main div (the one that's absolute positioned).
I added a width of 260px (same as the image)
When I did this, it aligned the div to the far right as you have right:0px is this correct?
http://jsfiddle.net/hw7t7xyn/5/
div.photo-wrap {
overflow: hidden;
position: absolute;
text-align: left;
width:260px;
}
img.photo {
position: relative;
display: block;
}
div.caption {
margin-top: 7px;
width: 95%;
position: relative;
display: inline-bock;
}
give width to photo-wrap
Hey guys I have an interesting set up going on. I'm working on creating SOME mobile support for an existing site. Basically when the window is brought to a certain size or the page is opened up on a phone I want to the header to do something different. That part is easy the only thing I'm running into is this.
The basic structure of my header is this
[logo][user-stuff][right-side][1][2][3][/right-side]
These elements are all in a nice line in my header. My problem is that in mobile I need one of the elements from inside the containing div on the right to float underneath the header. So I either need it to pop outside of its container or I need its container to take up with the width of the screen. The idea is that it will end up looking like this.
[logo][user-stuff][right-side][1][2][/right-side]
[ 3 ]
any ideas how this can be done? If I have to use some Javascript to make this possible that's fine, but the markup needs to be minimal as per my bosses instruction. Just a little stumped on the direction.
current html
<div id="header">
<div id="logo"></div>
<div id="user-stuff"></div>
<div id="right-side">
<div id="1" class="right-side-section"></div>
<div id="2" class="right-side-section"></div>
<div id="3" class="right-side-section"></div>
</div>
</div>
current css
#header {
height: 48px;
width: 100%;
}
#logo {
display: inline-block;
vertical-align: top;
}
#user-stuff {
display: inline-block;
vertical-align: top;
}
#right-side {
display: block;
float: right;
}
.right-side-section {
display: inline-block;
vertical-align: top;
}
Of course this is just a little bit of mockup code to give you an idea of the structure i'm working with and how everything is laid out. I just need to figure out a way to have div#3 drop underneath everything and take up the width of the screen when the screen is a certain size. Not sure how to have it breaks it's flow.
Since the header has a defined height this will be easy. Just add position: relative so that you can absolutely position child elements relative to itself.
Then you can set the css for div#3 to use absolute positioning as in the following example.
#header {
height: 48px;
width: 100%;
position: relative;
}
#3 {
position: absolute;
top: 48px;
left: 0;
width: 100%;
text-align: center;
}
See working Demo here: http://jsfiddle.net/Cce9n/
Please note that it is not valid to assign an ID starting with a number.
You may use Javascript to edit other div definitions,
E.G. changing the text-align style
document.getElementById("right-side").style.text-align = "center";