I'm a noob, trying everyday to learn more about CSS (even though I'm clumsy and "not a natural", my brain steams out like an old computer). I want to find out how to code a set of independent modules which share the same style and are displayed inline in two rows of two columns. I want to recreate a paper stack for each module, using z-index and absolute positioning for it.
I made this image to show what I'm looking for:
I tried display:inline for the top div - but this way, I had to code individual overlapped divs for each module, using position:absolute and coordinates. What would be most desirable is that a single module+overlap could be repeated, using the same class (without having to change each module's overlapped div coordinates).
Does anyone have an idea about how to do this using CSS? Thank you in advance :)
Yes, you could do the following. You'll want to resize to whichever dimensions serve you best. JSfiddle here: http://jsfiddle.net/CNPJ9/2/
<div class="contain">
<div class="box">
<h1>A</h1>
</div>
<div class="behind"></div>
</div>
<div class="contain">
<div class="box">
<h1>B</h1>
</div>
<div class="behind"></div>
</div>
<div class="contain">
<div class="box">
<h1>C</h1>
</div>
<div class="behind"></div>
</div>
<div class="contain">
<div class="box">
<h1>D</h1>
</div>
<div class="behind"></div>
</div>
.contain {
margin:25px 25px;
float:left;
}
.box h1 {
font: 8em normal Futura, sans-serif;
text-align:center;
color:#f1f1f1;
}
.box {
width:400px;
height:300px;
background:#000;
z-index:1;
float:left;
position:absbolute;
}
.behind {
width:350px;
height:325px;
margin-left:25px;
background:#333;
z-index:2;
}
Something like this may help you.
Fiddle
.abc{
width=300px;
height:200px;
margin:50px;
border:solid 2px black;
border-bottom: 5px double blue;
}
Related
I started to learn HTML / CSS and I am having a problem with aligning two divs in a scrollable div. For better understanding I am going to share my code. If someone can help me I am going to be really grateful. Thank you in advance.
The idea is every "Test" class to have 100% width and to be aligned one after another in a row while the class "Box" have a scrollable feature.
.Wrapper{
position:relative;
width:90vw;
background-color:blue;
}
.Box{
display;
position:relative;
width:100%
overflow-x:scroll;
}
.Test{
width:100%;
background-color:red;
}
<div class="Wrapper">
<div class="Box">
<div class="Test">
Test 1
</div>
<div class="Test">
Test 2
</div>
</div>
</div>
Best regards,
George S.
I'm not sure if I understood you correctly, but this is one solution to achieve it. This solution forces every child element of box to be in one row (white-space: nowrap), if it is an inline or inline-block element. Here is a jsFiddle: https://jsfiddle.net/rq98w432/1/
HTML:
<div class="Box">
<div class="Test">
Test 1
</div>
<div class="Test">
Test 2
</div>
</div>
CSS:
.Box{
width:90vw;
background-color:blue;
white-space: nowrap;
overflow-x:scroll;
color: white;
padding: 10px;
}
.Test {
display: inline-block;
width: 100%;
}
I am trying to get two divs to sit side by side within another div, however the first div won't show up in the container div. "contactleft" wont show up inside of "contactcont". I'm not sure if it has something to do with the display:block's or not? I tried clearing the "left" one too, no luck. Anyone know whats up? Thank you!
html:
<div id="contact">
<img src="Images/contactbanner.jpg" alt="contactbanner">
</div>
<div id="contactcont">
<div id="contleft">
</div>
</div>
CSS:
#contactleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
#contactcont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
You have what I assume is a typo in your code. Should work correctly with the following:
<div id="contactcont">
<div id="contactleft">
</div>
</div>
See jsfiddle
You have a typo at contleft in your CSS it should be :
#contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
}
Your HTML looks fine :
<div id="contactcont">
<div id="contleft">
inner content here
</div>
</div>
Here is the fiddle showing that.
You're actually pretty good there, I would just change your "contactLeft" to a class, and repeat "contactLeft" as many times as you need to. Here's a link to a CodePen.
Link to CodePen
Here's the HTML:
<div id="contactCont">
<p>contact Container</p>
<div class="contleft">
<p>contact Left</p>
</div>
<div class="contleft">
<p>contact Left</p>
</div>
</div>
And here's the CSS:
.contleft {
float:left;
display:block;
background-color:red;
width:100px;
height:300px;
border: 1px solid black;
margin-left:1px;
}
#contactCont {
display:block;
clear:both;
background-color:blue;
height:350px;
width:960px;
margin-left:auto;
Margin-right:auto;
}
Note, that I changed your banner height to 20px and stretched the screen width.
Then I just copied your second "div" inside your container in the same hierarchy to add another side by side. I added 1px of margin-left, and 1px solid black borders to exaggerate the point.
You can also reference bootstrap for some responsive sizings if you're new to this until you get to understanding the CSS and HTML elements a little more.
Get BootStrap
On the webpage, I would like to create a virtual frame (centered about the page) and be able to align elements (e.g images, text, etc) within the frame using CSS properties.
Since a picture is worth a thousand words, this is what I mean:
I'd want to be able to align "Text1" to the left with respect to the virtual frame which is kept centered about the webpage. Similar idea with "CenteredText" and the blue box being aligned to the right relative to the frame.
I'd really appreciate suggestions on how I'd be able to do this.
This may help you:
HTML:
<div class="frame">
<div>Text1</div>
<div class="centered">Centered text</div>
<div class="box"></div>
<div class="clr"></div>
</div>
CSS:
.frame{width:80%; margin:0 auto; border:1px solid #444; height:500px}
.centered{text-align:center}
.box{background:blue; height:50px; width:50px; border:2px solid black; float:right}
.clr{clear:both}
jsfiddle: http://jsfiddle.net/ashishanexpert/fqaDQ/
margin: 0 auto;
in your css.
You need a div with a class or id you can attack to and then give it the above property.
This will centre the div in the page.
<body>
<div id="wrapper">
<div id="left">left</div>
<div id="centered">centre</div>
<div id="right">right</div>
</div> <!--close wrapper-->
css:
#wrapper{
margin: 0 auto;
width: 960px;
position: relative;
}
#left{
float: left;
}
#right{
float: right;
}
Good luck!
I'm building a sort header for a table that's built entirely with divs (ie. no table tags). Inside the sort header, I have two divs, the sort title and the sort direction. I want to have the header horizontally centered. I have a jsfiddle that looks like this:
<div class="SomeHeader">
<div class="HeaderTitle">sort1</div>
<div class="HeaderSort"> ▾</div>
</div>
<div class="SomeOtherHeader">
<div class="HeaderTitle">sort2</div>
<div class="HeaderSort"> ▾</div>
</div>
.SomeHeader{
width:90px;
float:left;
background:red;
color:white;
line-height:20px;}
.SomeOtherHeader{
width:120px;
float:left;
background:black;
color:white;
line-height:20px;}
.HeaderTitle{float:left;}
.HeaderSort{float:left;}
What's the way to do this cleanly? I know I can specify the margin and width of each element to get the desired effect but when the value of these header will change then the alignment will not be centered. I know I can also do this with jQuery by looping over the header and calculating the width of headers and titles and programmatically setting the margins of each header. I'm looking to see if there's a more general CSS-based approach that will center both the HeaderTitle and the HeaderSort inside the SomeHeader classes.
Thanks for your suggestions.
http://jsfiddle.net/7R9WW/13/
Same markup, but display: inline-block on the inner divs and text-align: center on the field containers.
.SomeHeader{
width:90px;
float:left;
background:red;
color:white;
line-height:20px;
text-align:center;}
.SomeOtherHeader{
width:120px;
float:left;
background:black;
color:white;
line-height:20px;
text-align:center;}
.HeaderTitle{display:inline-block;}
.HeaderSort{display:inline-block;}
The HeaderSort div seems unnecessary. Could it not look like this http://jsfiddle.net/7R9WW/7/
Updated answer: http://jsfiddle.net/7R9WW/14/
Use a wrapper!
<div class="wrap">
<div class="SomeHeader">
<div class="HeaderTitle">sort1</div>
<div class="HeaderSort"> ▾</div>
</div>
<div class="SomeOtherHeader">
<div class="HeaderTitle">sort2</div>
<div class="HeaderSort"> ▾</div>
</div>
</div>
And the CSS:
.wrap {width: 220px; margin: auto;}
wrap these two header divs with another div and then giv that div a margin:0 auto.
<div class="SomeHeader">
<div id="wrapper">
<div class="HeaderTitle">sort1</div>
<div class="HeaderSort"> ▾</div>
</div>
</div>
<div class="SomeOtherHeader">
<div id="wrapper">
<div class="HeaderTitle">sort2</div>
<div class="HeaderSort"> ▾</div>
</div>
</div>
CSS:
#wrapper{
width: 100px;
margin: 0 auto;
overflow: hidden;
}
The width should be the sum of the width of the two contained divs , so you'll need to define a width to them.
This question is best explained with a screenshot:
http://i42.tinypic.com/2ccvx91.jpg
The wrapper div has a background image of a city.
#wrapper {
background:url('city.jpg');
}
Inside that div is a bunch of other divs of class 'square':
.square {
width:40px;
height:40px;
background-color:#27272f;
opacity:.8;
margin:2px;
}
You can see through the squares to the city because of the opacity. But you can also see through the spaces in between the squares, which I don't want it to do. I want to only be able to see through the divs to the element behind it, with the spaces between them being solid black. How can I do this?
Thanks.
best bet is remove margin.. and give your div border of 2 px..
What about setting the border and using a wrapper div to hide the corners. You have to have a negative margin for the overlap to work though
Here is the adapted jsfiddle from animuson:
<div id="wrapper">
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
<div class="hidingborder">
<div class="square"></div>
</div>
</div>
and here is the css
#wrapper {
background:Green;
font-size:0;
}
.square {
width:40px;
height:40px;
background-color:#27272f;
opacity:.8;
border:2px solid black;
border-radius:5px;
display:inline-block;
margin:-2px;
}
.hidingborder
{
border:#27272f solid;
display:inline-block;
}