I have a box center, and I want to color that box differently depend on the page. I try this
#center {
margin-top: 2px;
padding: 10px 20px; /* CC padding */
width: 100%;
height: 800px;
color: black;
font-size: 11px;
}
#backgroundRed{
background-color: red;
}
#container {
padding-left: 200px; /* LC fullwidth */
padding-right: 240px; /* RC fullwidth + CC padding */
}
#container .column {
position: relative;
float: left;
}
so then I would try this
<div id="containder">
<div id="backgroundRed">
<div id="center" class="column">
abc
</div>
</div>
</div>
however the background of the box does not turn to red, someone explain to me what did I do wrong? btw, I must have class="column"
Maybe what you wanted was this rule?
#backgroundRed div#center {
background-color: red;
}
That means "if div#center is a child of #backgroundRed..."
Your example should make the outer div have a red background.
Try the following code
#backgroundRed{
background-color:red;
overflow:hidden;
}
Related
I have floated the image left with a class of logo. I apply a background color for h1 and the image but it does not appear for some reason. Why is this happening? I have floated the image because the text appears below the image not top of the image. Is there a way to deal with it?
JS Fiddle - https://jsfiddle.net/z8cw31j9/
#import url(http://fonts.googleapis.com/css?family=Niconne);
body {
background: #e6e3d7;
font-size: 16px;
}
header {
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo {
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font: 300% 'Niconne', cursive;
line-height: 200%;
height: 0;
color: white;
margin-left: 2%;
background: blue;
}
.clear {
clear: both;
}
.search {
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300">
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
Actually background color was set successfully, but you can't see because of zero height:
header h1 {
height: 0;
}
#import url(http://fonts.googleapis.com/css?family=Niconne);
body{
background: #e6e3d7;
font-size: 16px;
}
header{
background: #b47941;
width: 95%;
padding-left: 1%;
margin: 0 auto;
}
.logo{
width: 12%;
height: 12%;
float: left;
background: green;
}
header h1 {
display: inline-block;
font:300% 'Niconne', cursive ;
line-height: 200%;
color: white;
margin-left: 2%;
background: blue;
}
.clear{
clear: both;
}
.search{
display: inline;
background: blue;
}
<div class="container">
<header>
<img class="logo" src="https://placehold.it/500x300" >
<h1 class=""> Heading one </h1>
<input type="search">
<div class="clear"></div>
</header>
</div>
header h1{...enter code here...}
remove height:0;
The color you applied to the img tag is actually there. It's just directly behind the image, so you can't see it. If you apply padding: 25px to the .logo class you'll see what I mean.
In terms of the h1, you've given it a height: 0, so there's no space to show the background color.
for your h1, the background is not working because you set the height of the element to 0, so there wouldn't be any color that will show up.
and as for your img, the background is not working because you have a image in front of it.
If you want to see the background for the img, you can add a padding for it
Was wondering if i can display 1 text box and 3 images on the same row? All the images are the same size. If possible aswell i'd ideally like a some text underneath each image aswell?
heres the code:
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<img src="img/body-metrix.png">
<img src="img/body-metrix-logo.png">
<img src="img/market.png">
</div>
</div>
.row {
display: inline;
float: left;
}
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
}
.side-bar h3 {
font-weight: bold;
font-size: 19px;
margin-bottom: 5px;
}
.side-bar p {
font-size: 14px;
}
.side-bar a {
font-size: 13px;
}
.recent-wrap img {
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
Ive searched the internet but no luck as yet.
thanks in advance.
There are a number of ways to do this, one example is to float the two child elements:
.side-bar, .recent-wrap {
float: left;
}
This will only work if there is enough room on the parent element for the .side-bar and .recent-wrap to sit next to each other.
Example: http://jsbin.com/poxox/1/edit
CSS:
.row {
width: 250px
}
http://jsfiddle.net/3DCSd/
Here Is a working Fiddle
.row {
display: inline-block; /* changed to inline-block, you don't need
inline and float */
}
.recent-wrap a { /*changed to a , since your images are wrapped in <a> */
max-width: 225px;
min-height: 125px;
border-style: solid;
border-width: 1px;
border-color: #000000;
margin-right: 20px;
margin-bottom: 20px;
}
The rest of the CSS stayed the same
and HTML I just added the text box
<div class="row">
<div class="side-bar">
<h3> Recent Work </h3>
<p>Here's some of my latest work, covering web design, branding and identity.</p>
View the Portfolio →
</div>
<div class="recent-wrap">
<input type="text" id="ss" />
<img src="img/body-metrix.png"/>
<img src="img/body-metrix-logo.png"/>
<img src="img/market.png"/>
</div>
</div>
Try this:
.side-bar {
padding: 10px;
background-color: #f3f3f3;
height: 200px;
width: 250px;
float: left; /* added */
}
.recent-wrap {
margin-left: 270px; /* added (padding + width) of side-bar */
}
Working Fiddle
This approach let the second container stay in line with the first container even if the window size is small.
Here is the sample with textboxes below image: example
How can I make this divider with a logo in the centre in CSS? ! I've been trying but didn't even got close yet. What would be the best way to achieve this.
Thank you!
Update
This needs to be placed on top of a bg image so the gaps around the logo must be transparent.
Sorry guys this one is a little tricky I know...
Here's the PNG
Well, if you're background is totally plain then it's relatively straight forward.
The HTML
<header>
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</header>
The CSS
body {
margin: 0;
background: white;
}
#logo {
width: 200px; /* Width of image */
padding: 40px; /* Creates space around the logo */
margin: 0 auto; /* Centers the logo */
background: white; /* Must be same as body */
position: relative; /* Brings the div above the header:after element */
}
#logo img {
display: block;
}
/* :after pseudo element to create the horizontal line */
header:after {
content: '';
display: block;
width: 100%;
height: 1px;
background: #ccc;
margin-top: -90px; /* Negative margin up by half height of logo + half total top and bottom padding around logo */
}
Working demo here.
EDIT
For situations where the body (or containing div) is not a solid colour, try the following:
HTML
<div id="header">
<div id="logo">
<img src="http://placehold.it/200x100" alt="Placeholder Image" />
</div>
</div>
CSS
body {
margin: 0;
}
#logo {
width: 100%;
}
#logo, #logo:before, #logo:after {
float: left;
}
#logo:before, #logo:after {
content: '';
width: 50%;
min-height: 100px; /* height of image */
border-bottom: 1px solid #ccc;
margin-top: -50px;
}
#logo:before {
margin-left: -120px;
}
#logo:after {
margin-right: -120px;
}
#logo img {
float:left;
padding: 0 20px;
}
Working demo here.
OR even an example based on display: table, but this goes a bit wonky when resizing.
http://jsbin.com/ITAQitAv/10/edit
This would be one approach:
.hr {
height: 50px; /* imageheight */
background: #fff url(http://placekitten.com/100/50) no-repeat center;
}
.hr hr {
top: 50%;
position: relative;
}
<div class="hr"><hr /></div>
This would be another:
.hr2{
display: block;
border-top: 2px solid black;
height: 2px;
}
.hr2 img {
display: block;
margin: auto;
margin-top: -31px; /*img-height /-2 + height / 2 */
/* adjustments for 'margin' to border */
padding: 0 20px;
background: #fff;
}
<div class="hr2"><img src ="http://placekitten.com/100/60"></div>
Demos: http://plnkr.co/edit/DznVp8qB9Yak8VfHVzsA?p=preview
I have a situation where I have one div of fixed width, containing an image pulled from Twitter, and another div of variable width containing user text of variable length. What I want to achieve is something like the following:
I can do this well enough with a single div that has background-image and padding-left. But I want to be able to apply border-radius to the img element, which simply won't be possible with a background-image.
If I do text-align: center on the outer div, it gets me halfway there. Here's a DEMO and a screenshot:
But this obviously isn't fully what I want.
How can I accomplish this?
Ask and you shall receive — a simplified jsFiddle example:
As an added bonus, the text is vertically centered too!
HTML:
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png" />
</div>
<div class="logo-name">
AppSumo is a really really long title that continues down the page
</div>
</div>
CSS:
.logo {
background-color: #eee;
display: table-cell;
height: 100px;
position: relative;
text-align: center;
vertical-align: middle;
width: 600px;
}
.logo-container {
background-color: #fff;
border-radius: 10px;
left: 10px;
position: absolute;
top: 10px;
width: 75px;
}
.logo-name {
font: bold 28px/115% Helvetica, Arial, sans-serif;
padding-left: 85px;
}
Would it be something like this?
http://jsfiddle.net/uPPTM/6/
.logo {
width:80%;
margin:auto;
background-color: red;
}
.logo-container {
border: 1px solid gold;
width:73px;
height: 73px;
display: inline-block;
vertical-align:middle;
}
.logo-name {
display: inline-block;
}
You can float the image container (or image itself without the container) to the left, clearing anything the left... and then float the text to the left, clearing anything to the right.
.logo-container{
float:left;
clear:left;
}
.logo-name{
float:left;
clear:right;
}
You can adjust the distance of the text using margins.
.logo-name{
float:left;
clear:right;
margin-top:10px;
margin-left:5px;
}
Use absolute positioning with a left position to push the title text past the image.
http://jsfiddle.net/uPPTM/9/
.logo { width: 50px; }
.title {
position: absolute;
top: 0;
left: 50px;
font-size: 32px;
text-align: center;
}
img {
border: 1px solid gray;
border-radius: 15px;
}
<div class="logo">
<div class="logo-container">
<img src="http://img.tweetimag.es/i/appsumo_b.png">
</div>
<div class="logo-name">AppSumo</div>
</div>
I'm trying to teach myself CSS and have the following markup:
<style type="text/css">
#content { display: block; width: 250px; height: 50px; background-color: #330000; }
/* pink */
#one { height: 25px; width: 25px; background-color: #FFCCCC; float: left; margin: 10px; }
/* hot pink */
#two { height: 25px; width: 25px; background-color: #FF0099; float: left; margin: 10px; }
/* tan */
#three { height: 25px; width: 25px; background-color: #CC9900; float: left; margin: 10px; }
/* aqua blue */
#four { height: 25px; width: 25px; background-color: #33FFFF; float: left; margin: 10px; }
/* yellow */
#five { height: 25px; width: 25px; background-color: #FFFF00; float: right; margin: 10px; }
</style>
</head>
<body>
<div id="content">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
</div>
The page is working correctly, but I'm interested in removing the duplicate code within the CSS itself. I.e. have all height, width, float all in one defintion then override the background color for each of the #id values
When I tried:
#content { height: 25px; width: 25px; float: left; margin: 10px }
then put:
#one { background-color: #FFCCCC; }
#five { background-color: #FFFF00; float: right; }
that didn't work.
Basically I'm trying to remove the amount of duplicate markup.
What am I missing?
You have to specify the node after #content:
#content div { SAME RULES }
#one { INDIVIDUAL }
#five { INDIVIDUAL }
or you can do this:
#one, #two, #five { SAME RULES }
#one { INDIVIDUAL }
You can also give each of those divs a class name and do
.divs { SAME RULES }
#one { INDIVIDUAL }
You want:
#content div {
i.e. "All the div elements that descend from the element with the id 'content'"
I recommend giving http://css.maxdesign.com.au/selectutorial/ a read.
You could use classes. Define a base class that contains the common properties:
/* Generic class for all four elements */
div.button { height: 25px; width: 25px; float: left; margin: 10px; }
and then define 1-4 (I'm using classes here as well, as it is the best practice in many cases, but you can carry on using IDs if you want to):
div.one { background-color: #FFCCCC; ... }
div.two { background-color: #FF0099; ... }
and then assign the base class and the specific class:
<div id="one" class="button one"></div>
the "button one" part will let both classes' properties apply to the element.
Here ya go, #content div is what you want. You can go deeper if you needed, ie #content div span a would reference an anchor, nested in a span that's nested in the div that's nested in something with the ID of #content.
http://jsfiddle.net/eDhXs/
#content { display: block; width: 250px; height: 50px; background-color: #330000; }
#content div { height: 25px; width: 25px; float: left; margin: 10px; }
/* pink */
#one { background-color: #FFCCCC; }
/* hot pink */
#two { background-color: #FF0099; }
/* tan */
#three {background-color: #CC9900; }
/* aqua blue */
#four { background-color: #33FFFF; }
/* yellow */
#five { background-color: #FFFF00; }
This is where you would make use of classes. IDs are great for when you have a particular element that is unique to the page. But classes, you can define a set of attributes (even set an attribute more important than another). Furthormore, an element can have more than one class where they can't IDs
So what I would do is this
#pink { background-color: #FFCCCC; }
#hotpink { background-color: #FF0099; }
#tan{ background-color: #CC9900; }
#aquablue { background-color: #33FFFF; }
#yellow { background-color: #FFFF00; }
.box {
height: 25px;
width: 25px;
float: left;
margin: 10px;
}
And specify them in your HTML like this
<div id='pink' class='box'></div>
I like this version the best, because if you ever need to select this element in the DOM explicitly, it would look like
#pink.box {
height: a different height;
}
There are actually three alternative solutions to your problem
First solution
The first one is very close to what you've written yourself except that it should define CSS for any DIV underneath the one with the id="content":
#content div { height: 25px; width: 25px; float: left; margin: 10px }
Second solution
I should point out that this one is probably more common and gives more flexibility especially if you want subDIVs to not have common classes (in your case sizing). This one changes your markup a bit because you can define multiple CSS classes on a single HTML element:
<div>
<div class="content one"></div>
<div class="content two"></div>
<div class="content three"></div>
<div class="content four"></div>
<div class="content five"></div>
</div>
This way your CSS classes change a bit. You have to replace # with a . (dot):
.content { height: 25px; width: 25px; float: left; margin: 10px }
.one { background-color: #FFCCCC; }
...
.five { background-color: #FFFF00; float: right; }
Third solution
This one is very similar to the second one, except that it keeps the IDs of sub DIVs:
<div>
<div id="one" class="content"></div>
<div id="two" class="content"></div>
<div id="three" class="content"></div>
<div id="four" class="content"></div>
<div id="five" class="content"></div>
</div>
And CSS:
.content { height: 25px; width: 25px; float: left; margin: 10px }
#one { background-color: #FFCCCC; }
...
#five { background-color: #FFFF00; float: right; }
You have two options, the first is to use the parent container (in this case the div #content) to set default attributes to each of it's nested divs, to do this you could use code like this:
#content div {
repeat-attributes-here;
}
This will set attributes for every div inside #content.
The second option is to use classes to define the common attributes. The benefit of this is you can still have other divs with different styling options (in case you add something new where you don't want the repeated functionality.
To do this you would do this:
#one {
unique-functionality-here
}
.layout-block {
repeat functionality here
}
Then define the div in the CSS like this:
<div id="one" class="layout-block"></div>
Hope that helps!