I am learning basic css, I've got a basic understanding of html. I was watching a YT video on css and cannot get my code to replicate what is shown on the screen. I've tried for an hour now. I'm sure it's something super simple, but you don't know what you don't know kind of thing.
I'm trying to get 2 colored blocks to stack one then the other. but they're just stacking on top of each other. I typed out my code just like it showed on the video. # https://www.youtube.com/watch?v=_0Z1oNQ93Wo&list=PLLAZ4kZ9dFpNO7ScZFr-WTmtcBY3AN1M7&index=7
my code is:
<html>
<head>
<meta charset="utf-8">
<title>CSS learning</title>
</head>
<body>
<h1>CSS Tutorial</h1>
<div style="width:90px; height:90px; background-color:blue;">
<div style="width:100px; height:100px; background-color:red;">
</body>
</html>
the red block is covering up the blue one, and not stacking on one another like in the video.
Embed the div into the div. They are on the same hierarchy.
<div>
<div>
</div>
</div>
If you want one div on top of the other do it like this:
<html>
<head>
<meta charset="utf-8">
<title>CSS learning</title>
</head>
<body>
<h1>CSS Tutorial</h1>
<div style="width:90px; height:90px; background-color:blue;">
</div>
<div style="width:100px; height:100px; background-color:red;">
</div>
</body>
</html>
You have to understand the css position. Here in short: If you set position: absolute of any element, it will position absolutely according to the nearest parent which has the position property of relative. So, if you want to stack one div to another - you need to give their parent position of relative, And give them/one of them position of absolute.
<div>
<div style="position: absolute; top: 0; left: 0; background-color: red; height: 150px; width: 150px"></div>
<div style="background-color: green; height: 150px; width: 150px"></div>
</div>
In this case the parent div has the position of relative by default.
Related
New here, I am making a web page for a school project and am having trouble getting the layout the way I want. was wondering if someone could point me in the right direction.
I am creating a layout. The top of the page is the navigation, then I have one main large image with some content over lay, and under that I have an image with content overlayed on the left and the right, then at the bottom the footer. * or thats what I would like anyway.
I have tried putting the images each in a but I can only get them to either be in a column or stacked. As I would like the first image under the header with navigation to be a wider picture , then two smaller ones each half the width of the main wider image if that makes sense..
I have searched online and the only things that looks similar to what I'm trying to accomplish are pay for templates.
<section>
<div class="container">
<img src="thebean.jpg" />
</div>
</section>
<section>
<div class="container">
<img src="rooftops.jpg" />
<div id="topleft"></div>
</div>
</section>
<section>
<div class="container">
<img src="thebean.jpg" />
<div id="topright"></div>
</div>
</section>
I'm not really sure if i got your question right without a figure that help me figure out the layout you are looking for.
Give a look at this picture and tell me if i got it right or not!
Layout testing
Here is the simple code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="test.css">
<title>Testing</title>
</head>
<body>
<div id="largerPanel">
<img src="https://i.pinimg.com/originals/aa/49/54/aa4954451f16847cb657e68e5f46538a.jpg">
</div>
<div id="floatPanel" class="halfPanel">
<img src="https://i.ytimg.com/vi/fB8MYCGFqC0/maxresdefault.jpg">
</div>
<div class="halfPanel">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8nIMQ30DM-OKazFBcLM4m9kq3_fzph-eBoiax6M88O5nncGyB">
</div>
</body>
</html>
Test.css
body{
width: 100%;
height : 100%;
}
.halfPanel{
width:50%;
height: 20%;
}
.halfPanel img{
width:100%;
height:100%;
}
#floatPanel{
float:right;
}
#largerPanel{
width: 100%;
height: 20%;
}
#largerPanel img{
width: 100%;
height: 100%;
}
If i got it wrong please post a simple paint image with some boxes that show the layout you want, i will be happy to help you through this!
Here is HTML Code
<!doctype html>
<html>
<head>
<title>Float</title>
<link rel="stylesheet" type="text/css" href="Font Sizes.css">
</head>
<body>
<div class="First">
<img src="firstImage.png" alt="First Image of Article" class="FirstImage">
<p> Picture No.1</p>
</div>
<div class="Second">
<img src="secondImage.png" alt="Second Image of Article" class="SecondImage">
<p>Picture No.2</p>
</div>
</body>
Here is CSS
.First{
width:430px;
background-color: Red;
float: left;
}
.Second{
width:330px;
background-color: Blue;
}
I tried different tricks but failed. Please Explain it in detail. I searched a lot but could not found my answer.The second element not arrange it self to the right side of first element. When i remove the width property from second element then it arranged at right.
With Width property:
Without Width Property on second element:
div's are block level elements and you have only supplied a float on First. Putting a float on Second will give you the effect you desire IF the browser is wider than 760px;
I have two divs, and I want to set them so the body div starts below the navbar, but they keep intersecting. How would I make it so that the bodyContainer div is always below the navbar?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css">
<meta charset="utf-8">
</head>
<div id="topBarContainer">
<div id="topBar">
<span id="topBarTitle">Private & Air's Shop</span>
</div>
</div>
<div id="bodyContainer">
<div id="bodyContent">
<div id="mainBodyContent">
test
</div>
</div>
</div>
</html>
CSS: http://pastebin.com/u5Z4ib4q
The css was long, so I put it into a pastebin.
You used 'position:fixed' on #topBarContainer in the css. This means that when other elements on the page are to take their positions, they will completely ignore the #topBarContainer as if it was not there in the first place. So remove 'position:fixed' from the css file. if however you chose to use 'position:fixed' intentionally to maintain the position of#topBarContainer even when the page is scrolled up then you should add the following to #bodyContainer#topBarContainer to force it under the #topBarContainer div
position:fixed;
top:75px;
you have used fixed position #topBarContainer. So that you need to add top-margin in body container
on your css
#bodyContainer {
margin-top:50px;/*the height of your header*/
}
This should do it! :)
I would remove the position: fixed; from your #topBarContainer, that will bring your #bodyContainer right below the navigation.
Optionally, I changed the #topBar's height: 75px; into min-height: 75px;, so you won't lose the content on smaller viewports.
Here's fiddle: http://jsfiddle.net/9me3hob3/
I've got div that I need to be fixed. Now I want to create two sub-divs inside that div. Is it possible?
What I am trying to get is:
div { position: fixed; }
---------------------
- sub-div1 { position: ??? }
- sub-div2 { position: ??? }
---------------------
I tried another position properties but haven't got that yet.
UPD: solved.
Depending on your inner positioning requirements, either relative or absolute,,, both 'consider' parents position / offset .. -> http://www.w3schools.com/Css/css_positioning.asp
You can definitely nest divs inside of divs.
<div id="div1">
<div id="div2">
</div>
<div id="div3">
</div>
</div>
There are 3 different kinds of positioning absolute, relative and fixed. If you position something as fixed, its positioned relatively to the browser window. Anything else you position inside of that div will be located within, unless its positioned with absolute or something I believe, but that would only be visual, technically in the page structure it would still be inside. But here's an example you can save and try, its by no means an example of style btw.
<html>
<head>
<style>
#div1{
left: 100px;
top:150px;
position:fixed;
background:red;
padding-bottom:10px;
}
</style>
<body>
<div id="div1">
heellloooooooooooooooo<br><br><br><br>
<div style="float:left;background:yellow;">
woooooooooorld
</div>
<div style="float:right;background:blue;">
hahahahahah
</div>
</div>
</body>
</html>
I have a div (with a fixed width) that has 2 image elements as children.
Each image is the same width as the div so the images are placed not on the same row (see screenshot) .
This is great, but I want the images to displayed the same way (one on top of the other) but at the bottom of the div.
I'm able to achieve such behavior in some browsers using:
-webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);
on the div css.
Is there a nicer way to achieve that?
Here is the code I used for the example:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;
width:33px}
</style>
</head>
<body>
<div class="container">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div>
</body>
</html>
Make the container position:relative; and set the images to position:absolute; bottom:0;
However, this will not stack the images. They will overlay each other. If you need them stacked, the easiest (dynamic) way is to wrap the images with another container (like a div), and then set the styles on it. For example...
Markup:
<div class="container">
<div class="innerContainer">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px" />
</div>
</div>
CSS:
.container {
background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;
height:116px;
width:33px;
position:relative;
}
.container .innerContainer {
position:absolute;
bottom:0;
}
The solution: Add an innner div and set its position to bottom:
<html>
<head>
<style type="text/css">
.container {background:url(http://img01.imagefra.me/img/img01/1/11/10/f_dwr8biwm_3ed594d.png) no-repeat;height:116px;position:relative;
width:33px;}
.inner {position:absolute;bottom:0px;}
</style>
</head>
<body>
<div class="container"><div class="inner">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
<img src="http://img01.imagefra.me/img/img01/1/11/10/f_ei8p1qf6om_0e5c35c.png" width="33px">
</div></div>
</body>
Thanks to Josh for suggesting this.