So I'm building a page that will be used by multiple companies, but I'm having some issues. In the first example, with the code for just the two divs, looks fine, but I'd like some space between each row. I've also posted the css below. Then in the second link, I've pasted the code with a layout of one of the companies that will use the code. It looks better but it pushes the sidebar down.
http://tinyurl.com/bo6ukqe
http://tinyurl.com/cerzfwd
So I'm curious what's the best way to fix this. I need the left div and right div to line up. Currently
I want the left and right div to line up. Meaning, both are the same height.
I'd like if there's a little bit of space between each row. Currently, the pictures are right on top of each other.
I'd like the right div's size to depend on how much room it has. So instead of one company having to have it at 55% because of a sidebar, then another company has to change it to 80% because it doesn't have a sidebar.
Here's the css if you prefer no to dig through the code in the above links:
<style type="text/css">
.body { border : 1pt solid black; }
.left { clear: left; float : left; width:226px; height:127px; }
.right { float : right; width : 80%; }
.spacer { clear : both; height: 10px; }
img { border: none; }
p.description {
line-height:18px;
color:#767676;
font-size:12px;
}
p.description a {
font-weight:bold;
}
a.read-more-link {
border-top:none;
text-transform: uppercase;
margin:0; padding:0;
font-size:10px;
}
.read-more a {
border-top:none;
display: block;
text-align: right;
text-transform: uppercase;
margin:15px 0 0 0; padding:0;
text-decoration: none;
}
</style>
For #1 and #2:
Put a wrapper div around each row. Since you are floating the child elements that wrapper will also need to be floated in order for it to respect inner heights so that your margins will push a sibling:
<div style="float: left; width: 100%; clear: both; margin: 0 0 10px 0;"></div><!-- wrapper row -->
For #3:
You will need to learn responsive web design.
First, you haven't closed .content_left, do this by adding </div> just before <div class="content_right"></div>
Then encapsulate each of the following in a <div class="row"></div>
<div class="left"></div><div class="right"></div>
then add
.row {
padding: 5px 0;
margin-left: 0;
margin-right: 0;
width: 60%;
}
then
.content_right {
width: 40%;
}
Related
Again, just learning CSS and trying to make a fictive homepage.
Here's a problem I came by:
I want to center the links and their background colors inside a DIV- element. However, I also want to keep the DIV centered (15% from each side) and changing the text inside the links will still center them, so the positioning can't be a specific value (need to use per centages, I think).
EDIT: Long explanation shortly: I want to get all four blocks in the middle of the page regardless of changing the size of the browser screen or the texts inside the blocks. Thanks :)
EDIT2: Changed the title to be found more easily from the Search- query.
Anything can be done to the code or do I have to change it somehow? Thanks.
Here's the HTML:
.infos {
padding-left: 15%;
padding-right: 15%;
position: relative;
top: 40px;
}
.infos a {
background-color: black;
color: white;
margin: 0px;
display: inline;
padding-top: 10px;
padding-bottom: 60px;
text-decoration: none !important;
}
.infos #centered {
position: relative;
display: block;
padding: 0px;
}
<DIV CLASS="infos">
<DIV ID="centered">
Application for Membership
Rules
Travel Conditions
Meetings
</DIV>
</DIV>
Thank you for your help!
#centered {
display:table;
background:red;
margin:auto;
}
#centered a {
color: white;
margin: 0;
float:left;
padding-top: 10px;
padding-bottom: 60px;
text-decoration: none !important;
}
<DIV ID="centered">
Application for Membership
Rules
Travel Conditions
Meetings
</DIV>
Ok. This is really weird and I have spent countless hours in vain searching for anything similar. I will add code, but you'll need visuals as well, so I'll include a couple of cropped images to show you what I mean.
My goal: Simple. Push my horizontal nav bar in my footer about 25px below the top edge of the footer. (Footer has a static background image)
Code used: #footer ul {margin:25px}
Result: No change.
HUH? So I played with it... tried several variations, but nothing worked. NOW, I did find a workaround... used padding instead of margin... but it bothered me that margin wouldn't work so I kept trying to figure out if I messed up my code somewhere.
I used float in the body, but I cancelled it out. Validations all came out ok. So I accidentally stumbled upon Firebug (never used it before... and still don't know how) but in my aimless clicking, I noticed something odd... when I clicked onto my footer ul, a box overlapping the footer and content was highlighted. So it appeared that my margin did exist, but instead of pushing my nav list down... it kept the nav list static, and expanded into the content.
HUH? So I did a little experiment. I created a bright border around the divs in my content and footer and ul to figure out exactly what was happening. (My content section has three divs: content (floating left); sidebar (floating right); and contentWrapper that contains both).
With the borders on, I noticed that my 'outerContent' div was collapsed. A mere 20% or so of the height of the area. So after some (lengthy) research, I came up with the overflow-auto fix. And although I still don't quite understand it, it worked. The contentWrapper expanded to meet the footer, and the footer ul moved to where I wanted to.
So problem fixed, right? Well..... not exactly.
My previews did fine, so I went back in and deleted the borders so I can get on with the rest of the formatting. Only when I previewed again... the footer ul was right back where it started. At the very edge of the top of the footer.
I did the borders again... the divs seemed fine, except that the contentWrapper was now pushed slightly above the footer to allow for that margin.
Now the REALLY weird thing is that when I put the border around my footer... the ul margin works. When I take it off... the ul goes back to where it was.
What the #$#%!? Although I know of the workaround (the padding) I am worried about compounding whatever mistake I have made and repeating constantly in the future (I have to build another website after this). If someone can figure out what I did to screw things up... it would be GREATLY appreciated.
#contentWrapper {
overflow: auto;
padding: 20px 10px;
}
#content {
float: left;
width: 660px;
}
#content h1 {
padding: 0 0 20px;
}
#content h2 {
padding: 20px 0 10px;
}
#content p {
line-height: 160%;
text-align: justify;
}
#content img {
float: left;
margin-right: 10px;
}
#content ul {
line-height: 160%;
list-style: disc outside url("../images/Bullet-artsy1.png");
margin: 0 0 10px 325px;
padding: 10px 0;
}
#content .info {
margin: 5px 0 10px 250px;
}
#rightSide {
float: right;
line-height: 140%;
padding: 0 10px;
width: 220px;
}
#rightSide h2 {
margin-top: 10px;
padding-bottom: 10px;
}
#rightSide p {
font-family: Georgia,"Times New Roman",Times,serif;
font-size: 16px;
text-align: justify;
}
#rightSide img {
display: block;
margin: 5px auto;
}
#footer {
background-image: url("../images/TCS-Footer1b-plain-230px h.png");
background-repeat: no-repeat;
clear: both;
height: 230px;
}
#footer ul {
list-style: none outside none;
margin: 25px;
text-align: center;
}
#footer ul li {
display: inline;
margin: 30px 0;
}
#footer ul li a {
color: #E8FAFF;
padding: 30px;
}
#footer p {
color: #E8FAFF;
text-align: center;
}
#footer img {
bottom: -60px;
position: relative;
right: -900px;
}
The site is not active, but I've uploaded a word doc with images showing what I am talking about. This is the link to Temp Share: http://temp-share.com/show/dPf3UCobW
Thanks in advance to everyone who can perhaps show me where I went wrong.
First, to prevent your margin from disappearing, either change the margin on the #footer ul element to padding, or add one px of padding to the #footer element.
In this fiddle, we've set the padding on the #footer to 1px and reduced the height by 2px to compensate.
FIDDLE
#footer ul {
list-style: none outside none;
padding: 40px;
text-align: center;
}
or
#footer {
background-color: #DDDDDD;
background-repeat: no-repeat;
clear: both;
color: #808080;
font-size: 12px;
height: 228px;
padding: 1px;
}
looking at the css, your padding settings on the <a> tags won't work the way you expect, since by default they are aren't block elements. Add this to the css to have them padded correctly:
#footer ul li a {
display: inline-block;
}
likewise, your ul li should be inline-block.
so ...
#footer ul li {
display: inline-block;
margin: 30px 0;
}
#footer ul li a {
display: inline-block;
color: #E8FAFF;
padding: 30px;
}
Basically, just be aware that when top and bottom margins touch, including those of parent and child elements, the largest margin is used, but the margin is pushed outside the outermost element.
I tested it using firebug and working fine. If you have problem you can add !important at the end as this
#footer > ul {
margin: 13px !important;
}
And even what you would like to do is to get some margin before and or after the ul. For this you could set margin and/or padding value to your #footer.
Hope this help!
This is for future reference. I simply wanted to add the following link to compliment Dom Day's above. I am still having difficulty conceptualizing the event but between the two links, it will help me research it until I find the equivalent to an 'adjoining/collapsing margins-for-dummies' site. www.w3.org/TR/CSS2/box.html - Details near the bottom of the web page.
I am trying to center the two links 'view website' and 'view project' inside the surrounding div. Can someone point out what I need to do to make this work?
JS Fiddle: http://jsfiddle.net/F6R9C/
HTML
<div>
<span>
Visit website
View project
</span>
</div>
CSS
div { background:red;overflow:hidden }
span a {
background:#222;
color:#fff;
display:block;
float:left;
margin:10px 10px 0 0;
padding:5px 10px
}
Another option would be to give the span display: table; and center it via margin: 0 auto;
span {
display: table;
margin: 0 auto;
}
One option is to give the <a> a display of inline-block and then apply text-align: center; on the containing block (remove the float as well):
div {
background: red;
overflow: hidden;
text-align: center;
}
span a {
background: #222;
color: #fff;
display: inline-block;
/* float:left; remove */
margin: 10px 10px 0 0;
padding: 5px 10px
}
http://jsfiddle.net/Adrift/cePe3/
<div style="text-align:center">
<span>Short text</span><br />
<span>This is long text</span>
</div>
Applying inline-block to the element that is to be centered and applying text-align:center to the parent block did the trick for me.
Works even on <span> tags.
Spans can get a bit tricky to deal with. if you set the width of teach span you can use
margin: 0 auto;
to center them, but they then end up on different lines. I would suggest trying a different approach to your structure.
Here is the jsfiddle I cam e up with off the top of my head: jsFiddle
EDIT:
Adrift's answer is the easiest solution :)
only css div you can center content
div{
display:table;
margin:0 auto;
}
http://jsfiddle.net/4q2r69te/1/
I assume you want to center them on one line and not on two separate lines based on your fiddle. If that is the case, try the following css:
div { background:red;
overflow:hidden;
}
span { display:block;
margin:0 auto;
width:200px;
}
span a { padding:5px 10px;
color:#fff;
background:#222;
}
I removed the float since you want to center it, and then made the span surrounding the links centered by adding margin:0 auto to them. Finally, I added a static width to the span. This centers the links on one line within the red div.
Yes, I'm a newb so please go easy. I know there's got to be several ways to accomplish this. Basically I've been trying to come up with a consistent way to have a header with a line after the text that will run to the full width of a container element.
Something like this:
This is my header _______________________________________________________ |<- end container
This is another header __________________________________________________ |<- end container
I'm trying to create a .line class that will use bottom-border to create the line but I've been unsuccessful at creating a variable length line that will extend the full width of the container.
Here's what I've tried:
CSS:
.line
{
display:inline-block;
border-bottom:2px #5B3400 solid;
margin-left:5px;
width:80%;
}
HTML:
<h2>Our Mission<span class="line"></span></h2>
Of course this only gives me a line 80% of the container from the left border including the width of the text. How can I create a line that begins after the text and runs the full width of the border regardless of how much text is on the same line?
I know this should be easy but I haven't been able to find a solution yet.
Thanks!
THIS METHOD WILL WORK WITH TEXTURED BACKGROUNDS (background images):
You can try using this method instead, if your <h2> is on top of a background image.
HTML:
<h2 class="line-title"><span>This is my title</span><hr /></h2>
CSS:
.line-title {
font-size: 20px;
margin-bottom: 10px;
padding-top: 1px; /* Allows for hr margin to start at top of h2 */
}
/* clearfix for floats */
.line-title:after {
content: "";
display: table;
clear: both;
}
.line-title span {
padding-right: 10px;
float: left;
}
.line-title hr {
border:1px solid #DDD;
border-width: 1px 0 0 0;
margin-top: 11px;
}
See the working example here: http://jsfiddle.net/yYBDD/1/
How it Works:
the <h2> tag acts as a container for a floated element.
the <span> is floated left, causing the <hr /> to collapse to the left and fill the right space.
the <hr /> acts as the line, and fills up the remaining space to the right.
THIS METHOD WILL WORK WITH SOLID BACKGROUND COLORS:
HTML:
<h2 class="line-title"><span>This is my title</span></h2>
CSS:
.line-title {
border-bottom: 1px solid #DDD;
font-size: 20px;
height: 12px;
margin-bottom: 10px;
}
.line-title span {
background: #FFF;
padding-right: 10px;
}
You can see a working example here: http://jsfiddle.net/yYBDD/
How it works.
the <h2> tag has a class that sets the height to half of the height of the text it contains.
the <h2> has a bottom border, that extends to the width of it's parent container (since it's a block element).
the <span> inside of the <h2> has a white background, which will cover the area where the text and border overlap.
And finally, the <h2>> has a bottom margin, that compensates for the reduced height of the <h2>.
You could use flexbox to do this.
http://jsfiddle.net/eHHep/ (prefixes not included)
<h1 class="lineme">This is my header</h1>
<h2 class="lineme">This is another header</h2>
.lineme {
display: flex;
}
.lineme:after {
display: block;
content: " ";
border-bottom: 1px solid;
flex: 1 1 auto;
}
Advantages over other methods:
No extra markup required
Background color is not required
Down side:
Support for flexbox is low due to IE10 being the first IE to support it (see http://caniuse.com/#search=flexbox)
Your line goes away if your text wraps around
HTML:
<h2><span>Our Mission</span></h2>
CSS:
h2{
border-bottom: 1px solid #000;
height: 20px;
overflow: visible;
display: block;
width: 100%;
}
h2 span{
display: inline-block;
background: #fff;
height: 21px;
}
This way it'll overflow on the bottom border as it has bigger height.
Demo: http://jsfiddle.net/afuzk/
Here's something I tried and that worked:
HTML
<h2>Our Mission</h2>
CSS
h2:after
{
content: "\00a0";
border-bottom: solid 2px black;
position: fixed;
top: 0;
width: 100%;
margin-left: 3px;
}
The JS Bin to test: http://jsbin.com/ayuvuc/4
I'm new to working with divs, so I'm not too good at using them. I'm making a music blog, and I want the user to be able to see the picture for the post, and arrows on either side to go to next or previous posts. I'm having trouble centering the arrows in my parent div.
I searched a few things online, but nothing seemed to work. Here is my css for a simple test...
#picture_wrapper {
width:550px;
background-color:#00F;
float:left;
}
#picture_container {
width: 500px;
float: left;
padding-left:5px;
padding-right:5px;
}
#left_arrow_container {
float: left;
top:50%;
width: 20px;
height:100%;
background-color: #F00;
}
#right_arrow_container {
float: right;
top:50%;
width: 20px;
height:100%;
background-color: #F00;
}
I set the arrow divs to have a background color of red, and I thought with this code the entire right and left sides would be red, but this is not the case. Only the area around my image is red. Here is the html that I am using.
<div id="picture_wrapper">
<div id="left_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_left_arrow.png' width = '20' height = '34px'/></div>
<div id="picture_container"><center><img src = 'http://www.startingtofeelit.com/wp-content/uploads/2012/07/DIIV+zachacry+cole+smith2.jpg' width = '500' /></center></div>
<div id="right_arrow_container"><img src = 'http://www.startingtofeelit.com/images/slider_right_arrow.png' width = '20' /></div>
</div>
Here is how it is being displayed on my Dreamweaver now...
pic1 http://www.startingtofeelit.com/images/pic1.png
Here is how I more or less want it to be displayed...
pic2 http://www.startingtofeelit.com/images/pic2.png
Thanks for the help.
Sounds like a job for vertical-align: middle;.
http://jsfiddle.net/Wexcode/Lp5M9/2/
#picture_wrapper {
background: #F00;
float: left;
font-size: 0;
white-space: nowrap; }
#left_arrow_container, #right_arrow_container {
height: 100%;
vertical-align: middle;
display: inline-block; }
#picture_container {
background: #00F;
padding: 0 5px;
vertical-align: middle;
display: inline-block; }
Let me know if you have any questions.
I prefer using absolute and relative position :), pretty much what I saw you were trying to achieve in your css, in order to top, left, right and bottom to work you must set a position (absolute, relative or fixed) and use your arrows as backgrounds
http://jsfiddle.net/wQqfp/2/