I'm doing an exercise to improve my coding and I'm trying to copy the layout from this page http://imgur.com/pM8owcj
I'm stuck with the 3-column section because each column overlaps the other.
I'm a beginner as you can see, I'll really appreciate any help.
Here is the link with the code: http://codepen.io/porpita/pen/ElKty
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="estilo.css" rel="stylesheet" type="text/css">
<title>
Ejercicio Multimedia
</title>
</head>
<body>
<section id="content">
<div id="header">
</div>
<div id="headermenu">
</div>
<div id="imagenprincipal">
</div>
<div id="espacio">
</div>
<div id="galeria">
<div id="columna">
<div id="movimientos"></div>
<div id="eventos"></div>
</div>
<div id="exposiciones"></div>
<div id="noticias"></div>
</div>
</section>
</body>
</html>
CSS
#content {
width: 1144px;
margin: 0 auto;
}
#header {
height: 140px;
border: 3px #000 solid;
}
#headermenu {
height: 40px;
border: 3px #000 solid;
}
#imagenprincipal {
height: 429px;
border: 3px #000 solid;
}
#espacio {
height: 69px;
border: 3px #000 solid;
}
#galeria {
height: 825px;
border: 3px #000 solid;
}
#columna {
width: 338px;
height: 825px;
border: 3px #000 solid;
float: left;
}
#movimientos {
width: 338px;
height: 353px;
border: 3px #000 solid;
}
#eventos {
width: 338px;
height: 472px;
border: 3px #000 solid;
}
#exposiciones {
width: 480px;
height: 825px;
}
#noticias {
width: 326px;
height: 825px;
border: 3px #000 solid;
}
Thanks a lot.
See the Updated Codepen Here: http://codepen.io/anon/pen/tmnrj
The borders you had around the inner elements (#columna, #exposiciones and #noticias) were adding to their widths, so 338px wide with a 3px border all around = 344px wide. You either need to reduce the width to compensate for the 6 pixels of border (3px each side) or set box-sizing: border-box; on the elements so they include the borders in their widths.
Reference on Box Sizing: http://css-tricks.com/box-sizing/
You were also only floating #columna. You need to float all three (#columna, #exposiciones and #noticias) and then set position: relative; overflow: hidden on #galeria to make sure it contains them or it will collapse.
Reference on floats: http://css-tricks.com/all-about-floats/
On a side note - Adding a background colour to the various elements can help identify what was happening with each as you can see in the above fiddle.
Hope that helps.
You're running into space issues because you are using thick pixel borders. Borders are applied to the outside of an element. This means if you set a width of 50px, then add a border of 3px all around, your final width is actually 56px, or 3px + 50px + 3px.
MDN has great documentation on how the CSS box model works, it'll save you hours of stuffing around.
Rather than trying to manually force things into place, it's often easier to allow the browser to calculate it for you by using percentages instead of fixed values like pixels.
It's also handy to test using background-color rather than border to identify elements, as the background color won't effect the actual width of your element.
Here's an example of your layout using percentages: Fiddle
Related
I am trying to build a monitor design using pure CSS. Currently, I have this:
CSS Monitor Design Fiddle
It looks ok, but if you play around with the screen size, the design itself is not responsive. Its parent container is responsive, thanks to Skeleton.
Now, I want to do these things:
Make the design responsive and fit to any screen size.
Maintain the aspect ratio of the screen. This is the main problem. I tried things like width: 100%, however, without a fixed height, things dont work.
Finally, I want the monitor base to be wired, that is, I want the trapezium to only have borders and not a fill color.
Any help is greatly appreciated!
My code:
HTML
<body>
<div class="container">
<div class="monitor-container">
<div class="monitor-top">
<div class="screen-content">
</div>
</div>
<div class="monitor-base">
</div>
</div>
</div>
</body>
CSS
.monitor-container {
margin: 25px;
padding: 25px;
border: 1px solid #000;
}
.monitor-top {
margin: auto;
width: 400px;
height: 250px;
border: 1px solid #000;
border-radius: 5px;
}
.screen-content {
margin: 25px;
width: 350px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
}
.monitor-base {
margin: 0 auto;
border-bottom: 50px solid black;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0;
width: 100px;
border-radius: 5px;
}
For the boilerplate, I am using these:
https://raw.githubusercontent.com/dhg/Skeleton/master/css/normalize.css
https://raw.githubusercontent.com/dhg/Skeleton/master/css/skeleton.css
To do the trapezium you need to put another trapezium over the top to give a wired effect. The way you have done it with borders can't be utilised in itself to have a wired feel.
add this line
<div class="monitor-base">
**<div class="mb2">
</div>**
</div>
and the css like this
.mb2 {
position:relative;
left:-22px;
top:2px;
margin: 0 auto;
border-bottom: 45px solid white;
border-left: 22px solid transparent;
border-right: 22px solid transparent;
height: 0;
width: 100px;
border-radius: 5px;
}
to have a wired effect.
The aspect ratio is something you would need to use a javascript preprocessor for I think, in vanilla css I don't think it is possible to maintain the aspect ratio as the height and width are independent, however in scss or less you can tie them together. I think.
I am learning html and i cant understand why when i have two lines inside one div the second line doesn't fall within the borders of the div.
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="testingsite.css">
</head>
<body>
<div><header><h3>Line 1</h3>
<br><h5>Line 2</h5></header></div>
</body>
My css isn't showing in a code block properly so i put a jsfiddle link below.
Thanks for any help.
https://jsfiddle.net/xLjsmrfc/
you can try this one:
add height :auto;
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: auto;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
DEMO HERE
You have a height property set in the CSS for the header tag.
height: 75px;
This restricts the height of the <header>, and thus the border. Remove the height property and things will correct.
Dear you are writing the code right but there is a small flaw in Css.
Both lines are falling within the Div just height of Div is Creating dilemma for you.
I've two methods for you :
----------1. Altering Your own code----------
body {
background-color: white;
border: 5px solid blue;
}
header {
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
----------2. Second My Way :----------
<style>
body {
background-color: white;
border: 5px solid blue;
}
#myid{
text-align: center;
height: 155px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
</style>
</head>
<body>
<div id="myid">
<header>
<h3>Line 1</h3><br>
<h5>Line 2</h5>
</header>
</div>
</body>
The problem is really with the styling you've done.
Change the div height to something like greater than the current 75px
header {
text-align: center;
height: 105px;
box-sizing: border-box;
border: 5px solid blue;
width: 100%;
}
Whenever you are using heading tag then those tags are taking their own padding and margin by which they are out of your border as you have given height to container so use heading tag according to your need.
Header tags ( h1...h5 ) have some default margins.
You can add the margin:0px for that and it will work fine.
Here is my code:
...
<STYLE>
body{
position: static;
height: 95%;
width: 95%;
border: 2px;
border-style: solid;
border-radius: 5px;
border-color: black;
background-color: pink;
}
<STYLE>
...
<body>
<DIV id="div_1" >
<DIV id="div_2a" >
</DIV>
<DIV id="div_2b" >
</DIV>
</DIV>
</BODY>
...
Although the height and width are specified as 95%, the width works but the height collapses, apparently because there is no content to the div's. This is totally counter-intuitive. To add
insult to the situation, the background color extends outside the border and fills the visible
page area. Is this a function of some sort of default body css declaration? If so what is it?
And how can I stop this behavior? If the css is changed to reference HTML the behavior is intuitive
in that the border doesn't collapse but the background color extends outside the border. At this
point it seems like a bug.
You specify the height of the body at 95%, meaning that it will take 95% of it's parents height. So, giving it's parent the htmltag a height, will also make your body take height.
html {
height: 100%;
margin: 0;
padding: 0;
}
body{
height: 95%;
width: 95%;
border: 2px;
border-style: solid;
border-radius: 5px;
border-color: black;
background-color: pink;
}
I'm trying to achieve a tapered <div> tag. That is, a slant edge on one side (slanting inwards) and a straight edge on all the other 3 sides.
I'm not sure if it is possible using CSS and HTML alone. I've tried Googling this problem, but could not find any solution to it.
I've tried:
-webkit-border-bottom-right-radius : 50px 650px;
where 650px is the whole height if my div. But this gives me a rounded corner for the bottom right position, which I don't want. Hope you guys know the answer to this problem, or at least suggest an alternative to this.
This can be achieved with transparent border!
CSS
#test1 {
border-top: 100px solid red;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
width: 300px;
}
#test2 {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
#test3 {
border-top: 100px solid red;
border-right: 50px solid transparent;
height: 100px;
width: 100px;
content: 'ds';
z-index: -1; /* make it the background */
}
#test3 .content {
position: relative;
top: -100px;
margin: 5px;
float: left; /* wrap the text */
clear: left; /* for demo */
font-size: 1em;
background-color: cyan;
}
HTML
<body>
<div id="test1">
</div>
<br/>
<div id="test2">
</div>
<br/>
<div id="test3">
<div class="content">
Watch for the<br>
new lines. <br>
Do not overlap.
</div>
</div>
</body>
Looks like CSS regions might http://www.adobe.com/devnet/html5/articles/css3-regions.html (scroll down to the section entitled "Wrap shape"). You could define the shape as a polygon and you're set! Unfortunately, shaped region support is currently limited, but depending on your use case, it might work.
I want to make two divs equal heights – left and right divs.
I referred the following posts and found a bottom padding approach.
How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
CSS: How to make left float div to adjust height dynamically?
I tried to apply this concept in my page; but it doesn’t work correctly. On top of the right div there is unwanted space. How can we rectify it?
CODE
<!DOCTYPE html>
<style type="text/css">
.myContent {
width: 100%;
border: 2px solid violet;
min-width: 1210px;
}
.myHeader {
width: 100%;
/*width: 1200px;*/
clear: both;
background-color: #DFE8EF;
border: 1px solid red;
}
.leftPart {
border: 1px solid red;
width: 200px;
height: 200px;
float: left;
background-color: silver;
}
.rightPart {
border: 1px solid orange;
background-color: beige;
float: left;
min-width: 1000px;
/*
margin-bottom: -1000px;
padding-bottom: 1000px;
margin-right: -5000px;
padding-right: 5000px;
*/
}
</style>
<html>
<head>
<title>UpdateAccrualByItem</title>
<link href="Content/MasterLayoutStyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="body">
<div class="myContent">
<div class="myHeader">
<img src="/Images/logo_header.jpg" />
</div>
<div class="leftPart">
Menu
</div>
<div class="rightPart">
<h2>UpdateAccrualByItem</h2>
</div>
</div>
</div>
</body>
</html>
You are very close, but just have a few little things wrong.
You don't need a width for the right column, just the default width:auto. I used the same negative margin and padding trick to make the right column's height the size of the left's height and also to give the right column the illusion of taking up the rest of the space. You also should float the right container and take away the margin. You can remove the clear:both of the left column because it's not used
Demo here
.leftPart {
border: 1px solid blue;
width: 200px;
height:200px;
float:left;
background-color: orange;
}
.rightPart {
border: 1px solid orange;
background-color: beige;
float:left;
margin-bottom: -1000px;
padding-bottom: 1000px;
margin-right: -5000px;
padding-right: 5000px;
}
Edit
You might also add some type of #media query to allow adjusting the window to look more smooth. Here is an example. It's semi-hard coded based on the text length in the example, but on your final product it might be something you add on at the end