i need some help with centering a text below a rotated div.
I can place the text on the div, but not below and in center.
HTML:
<div id="contact_main2">
<div id="marker_align"
<div class="marker">
<p>Test</p>
</div>
<div class="marker">
</div>
<div class="marker">
</div>
</div>
</div>
The whole code:
http://jsfiddle.net/GVsxF/
Hope someone can help me out
Try separating out the <p> tag from inside the marker <div>:
HTML:
<div id="marker_align">
<!-- changed in EDIT -->
<div class="marker-group">
<div class="marker"></div>
<div class="marker"></div>
<div class="marker"></div>
</div>
<div class="marker-label">
<p>Test</p>
</div>
<div class="marker-label">
<p>Test</p>
</div>
<div class="marker-label">
<p>Test</p>
</div>
</div>
In your CSS, delete the .marker p rule and add this:
.marker-label {
display: inline-block;
vertical-align: top;
width: 45px;
height: 45px;
margin: 0px 50px 0px 20px;
}
.marker-label p {
text-align: center;
}
/* added in EDIT */
.marker-group {
clear: right;
}
JSFIDDLE
EDIT
Added .marker-group and clear:right to prevent text from moving on browser re sizing. This will need additional improvements if browser is re sized to smaller width. JSFiddle has been updated to reflect changes
Related
Hello – I would like to show content in a div based on the content in another div. For example, if sibling1 is empty, I would like to hide sibling2 (in parent1 below). If sibling1 has content, I would like to show sibling2 (parent2 below). I'd prefer to be able to do this with CSS, is this possible? If not, I can work with a simple javascript suggestion as well.
<!---hide sibling2--->
<div class="parent1">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent2">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
.parent {
height: 100px;
border: 1px solid;
}
.sibling1 { background: green; }
.sibling2 { background: red; }
.sibling1:empty + .sibling2 { display: none; }
<!---hide sibling2--->
<div class="parent">
<div class="sibling1"></div>
<div class="sibling2">hide</div>
</div>
<!---show sibling2--->
<div class="parent">
<div class="sibling1">has content</div>
<div class="sibling2">show</div>
</div>
I have an example on JSFiddle on how I want to solve my issue with flexbox: I want the left column to fit the width accordingly to the content - break a line if the text is too long. Unfortunately it always takes as little space as possible, which results in breaking the layout.
I have a fiddle below, first you see two blocks with how it looks now, below you see 2 blocks how I want it to look like (I've defined fixed width for visual reasons, but I want it to be dynamically with flexbox, obviously).
I'm pretty sure I can do this easily but I can't see the wood for the trees. Any kind of help is highly appreciated :)
.flex {
display: flex;
background: #333;
max-width: 380px;
}
.first {
flex: 0;
background: #666;
}
.second {
flex: 1;
background: #999;
}
<p>How it looks like with my flexbox approach</p>
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<br />
<div class="flex">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr />
<p>How it should look like</p>
<!-- Ignore all code below, please - everything below is just here for visual reasons -->
<div>
<div style="background: #666; width: 165px; float: left;">Here is my Dynamic Text</div>
<div style="background: #999; float: left;">Next to text</div>
</div>
<div style="clear: both; height: 10px;">
</div>
<div>
<div style="background: #666; width: 302px; float: left;">Here is my Dynamic Text Here is my Dynamic Text</div>
<div style="background: #999;float: left; height: 36px;">Next to text</div>
</div>
Use white-space:nowrap on the second element so it does not collapse.
.flex {
display: flex;
border: 1px solid green;
}
.first {
background: lightblue;
border: 1px solid grey;
}
.second {
white-space: nowrap;
background: lightgreen
}
.narrow {
width: 50%;
<div class="flex">
<div class="first">
Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
<hr/>
<div class="flex narrow">
<div class="first">
Here is my Dynamic Text Here is my Dynamic Text
</div>
<div class="second">
Next to Text
</div>
</div>
I have an image that takes up the fold, below a fixed nav. I Want to vertical align: middle the #fold-text and chevron over the image.
html markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
This CSS below usually works when I want to center one div within another, but not luck on this (maybe because the img height is set to "auto" ? ) . Can anyone tell me how to correct this?
.background-image {
height: auto;
width: 100%;
display: table;
}
#fold-container {
display: table-cell;
vertical-align: middle;
}
#fold-text {
font-size: 1.6em;
font-weight: bold;
background-color: rgba(black, 0.3);
color: white;
display: table-cell;
}
.fa.fa-chevron-down {
z-index: 500;
color:white;
text-align: center;
font-size: 2em;
font-weight: normal;
display: table-cell;
}
Your desired markup:
<div class="row">
<img class="background-image" src="images/1400px_splash.jpeg">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
</img>
</div>
... is not valid HTML. <img> tags don't contain any other markup, so what the browser sees is more like this:
<div class="row">
<!-- note the self closing img tag -->
<img class="background-image" src="images/1400px_splash.jpeg"/>
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
</div>
<!-- </img> don't know what to do with this, because img tags close themselves -->
</div>
What you need to do is more like this:
<div class="row">
<div id="fold-container">
<div id="fold-text">
Sign up to learn about upcoming changes!
</div>
<div class="fa fa-chevron-down"></div>
<img class="background-image" src="images/1400px_splash.jpeg"/>
</div>
</div>
... and just make sure the appropriate stylings are added to your elements to position them appropriately.
I have a div with some text, then an image underneath the text, whenever you add more text it goes behind the image, (basic example I created in jsfiddle I want it to push the image down just far enough so you can see the text. However I want the two boxes to still be inline, so the images stay consistent, ideally I don't want to just change the height of the div as this text is constantly changing.
<div class="box one">
<div>
<h1>Some text 1</h1>
<p>My paragraph of text is not going to be visible behind the car</p>
</div>
<a href="http://www.google.co.uk">
<img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
</a>
</div>
<div class="box two">
<div>
<h1>Some text 2</h1>
<p>My paragraph of text is not going to be visible behind the car again!</p>
</div>
<a href="http://www.google.co.uk">
<img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
</a>
</div>
.box {
color: #333333;
font-size: 12px;
height: 305px;
padding: 10px 15px 0;
width:150px;
}
.box div {
color: #333333;
font-size: 12px;
height: 90px;
padding: 10px 15px 0;
}
.two {
float:right;
margin-top:-310px;
}
Remove height and put min-height: 90px;
.box div {
color: #333333;
font-size: 12px;
padding: 10px 15px 0;
min-height: 90px;
}
http://jsfiddle.net/KApb6/10/
It is happening because you have given height:90px to .box div.
Instead of height, write this 'min-height:90px'.
Here is the fiddle.
So basically you want your text height to stay consistent between all your boxes?
This is quite hard.
One solution is to put every block you have in one row container, like this:
<div class="header">
<div class="one">Some text one</div>
<div class="two">Some text two</div>
</div>
<div class="image">
<div class="one"><img src="image-one.jpg"></div>
<div class="two"><img src="image-two.jpg"></div>
</div>
Or similarly with tables, but it would be hideously hard to maintain all the styles and layout in check.
Other way is just to use javascript to set the height, which is way easier.
Codepen
See this code to know if is the result that you want.
You could put the text in one box and the images in anorther one.
<div class="clearfix">
<div class="box one">
<div>
<h1>Some text 1</h1>
<p>My paragraph of text is not going to be visible behind the car</p>
</div>
</div>
<div class="box two">
<div>
<h1>Some text 2</h1>
<p>My paragraph of text is not going to be visible behind the car again!</p>
</div>
</div>
</div>
<div class="clearfix">
<div class="box one">
<a href="http://www.google.co.uk">
<img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
</a>
</div>
<div class="box two">
<a href="http://www.google.co.uk">
<img src="http://www.wallpaperswala.com/wp-content/gallery/audi-r8-gt/audi-r8-gt-in-garage.jpg" height="80px" width="150px">
</a>
</div>
</div>
Then in the css remove the height of the div and add the clearfix class:
.box div {
color: #333333;
font-size: 12px;
padding: 10px 15px 0;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
I'm trying to slice an box with rounded corners. The image is sliced horizontal in 3parts (top-middle-bottom). The problem in IE7 is that the top div is larger than the actual size I set.
Here is the HTML & CSS code
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle' >
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
<!-- FIRST PICTURE -->
<div class='recent-box'>
<div class='recent-box-top'></div>
<div class='recent-box-middle'>
dsqd
</div>
<div class='recent-box-bottom'></div>
</div>
.recent-box {
width: 127px;
float:left;
display:block;
}
.recent-box-top {
float:left;
background-image: url('images/recent-foto-top.png');
background-repeat:no-repeat;
width: 100%;
}
.recent-box-middle {
float:left;
background-image: url('images/recent-foto-middle.png');
background-repeat:repeat-y;
width: 100%;
}
.recent-box-bottom {
float:left;
background-image: url('images/recent-foto-bottom.png');
background-repeat:no-repeat;
width: 100%;
}
Thanks for helping me out!
Ward
The font-size and line-height properties might be the offensive ones. If you are not placing any text in the top box, use something like
.recent-box-top {
font-size: 0;
line-height: 0;
}
Found the solution!
Just put in the div and it works like a charm!
found on http://archivist.incutio.com/viewlist/css-discuss/39150