here is the demo of my code http://jsfiddle.net/mn7Ut/
I cant seem to find a way to properly add text under h1. this is what happens when I try to add some text http://jsfiddle.net/uY3pQ/
what am I doing wrong this time? :C
div {margin:0; padding:0;}
#wrap {
background-color:#000000;
width:auto;
float:left;
padding:50px;
}
.container {
width:500px;
background:#666666;
color:#FFFFFF;
float:left;
margin-right:25px;
}
.left {
float:left;
display:block;
}
.padding {
padding:30px;
}
.list {
background-color:#333;
}
.box {
background-color:#ccc;
width:100px;
}
h1 {
color:#000;
background:#ddd;
}
.
<div id="wrap">
<div class="container">
<div class="box-container">
<h1 class="left padding">Some text here</h1>
<ul class="list padding left">
<li>Some text here Some text here</li>
<li>Some text here Some text here</li>
<li>Some text here Some text here</li>
<li>Some text here Some text here</li>
<li>Some text here Some text here</li>
<li>Some text here Some text here</li>
<li>Some text here Some text here</li>
<li>Some text here Some text here</li>
</ul>
</div>
</div>
<div class="box padding left">
Some text here Some text here Some text here
</div>
</div>
You could wrap the h1 and text in a container, and float it left:
html
<div class="left inner" >
<h1 class="padding">Some text here</h1>
text text text text text text text text
</div>
css
.inner{
display:inline-block;
width:200px;
}
See fiddle for full solution http://jsfiddle.net/uY3pQ/5/
Tested in chrome
Related
I cant seem to move the image inside a div. It can only be moved with absolute positioning, which I am not okay with. Can someone point out why the below given code isnt working. I want all 3 divs to be in one line . Image seems to be stuck in the top left corner. Applying padding doesnt change anything either.Please help
<div class="container" style="display:table">
<div style="display:table-cell">
<div class="emblem" style="padding:0 0 0 20px ;display:table-cell"></div>
<div class="logo" style="display:table-cell" Software Solutions</div>
</div>
<div class="header" style="">
<nav>
<ul style="display:flex;justify-content">
<li> Home</li>
<li>
<a href="{% url 'aboutus' %}" target="ifr" onclick="setTitle2()">
<title>RCE-About</title>About Us</a>
</li>
<li>Products</li>
<li>Solutions</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
It's maybe something like this you need to do..
EDIT:edited snippet code, navbar is under logo but take 100% width
.container{
display:flex;
justify-content: flex-start;
flex-wrap:wrap;
background:gray;
padding:5px;
}
.navbar-container{
width:100%
}
.container > div{
display:block;
height: 50px;
background: red;
margin-right: 15px;
padding:15px;
text-align:center;
}
ul{
margin:0;
padding:0;
}
ul li{
display:inline-block;
}
<div class="container">
<div class="1">Some text</div>
<div class="logo">LOGO</div>
<div class="navbar-container">
<div class="navbar">
<ul>
<li>test1</li>
<li>test2</li>
<li>test3</li>
</ul>
</div>
</div>
</div>
I have a section in html page whose max width is set by a container. The heading and two columns in the section aren't floated. only the columns are floated left while the heading is center text aligned. Because of this the border that I put for the section wraps around the heading. Because of this some sections of page after this is being mis aligned. Is there a way I can fix it?
<section class="carousel freedom container"> <!--Freedom section -->
<h1> This is the heading </h1>
<ul class="two-col left-col">
<li class="pen"> <span class="icon-text"> <span> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
<li class="phone"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
</ul>
<ul class="two-col right-col">
<li class="arrow"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span> </li>
<li class="download"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT </li>
</ul>
</section> <!--End of Freedom carousel -->
Fiddle link: http://jsfiddle.net/7khffLsm/
JSFiddle - DEMO
You could use display: inline-block; to .left-col, .right-col and remove float: left;
CSS:
.container {
max-width:1024px;
margin: 0 auto;
}
.left-col, .right-col {
list-style: none;
width: 45%;
display: inline-block;
margin: 0;
padding: 0;
}
.two-col li {
padding-left: 30px;
margin-top: 20px;
margin-left: 30%;
}
.carousel h1 {
font-family:"HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", "Helvetica";
font-size: 20pt;
color: #252525;
font-style: normal;
text-align: center;
line-height: 24pt;
letter-spacing: 0em;
}
.carousel.freedom {
border: 2px solid;
}
HTML:
<section class="carousel freedom container">
<!--Freedom section -->
<h1> This is the heading </h1>
<ul class="two-col left-col">
<li class="pen"> <span class="icon-text"> <span> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span>
</li>
<li class="phone"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span>
</li>
</ul>
<ul class="two-col right-col">
<li class="arrow"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT</span>
</li>
<li class="download"> <span class="icon-text"> TEXT TEXT TEXT TEXT TEXT TEXT TEXT </li>
</ul>
</section> <!--End of Freedom carousel -->
For each list item, I want an image with text below the image.
I read on this technique, but it is not supported in IE. Instead, I'm floating the list items to the left. It does the trick except the content below the list wraps to the right. How do I prevent the content from wrapping this way?
Here is my code:
<style>
.horizlist{
list-style:none;
text-align:center;
}
#menulist ul{
width:360px;
}
#menulist li{
float:left;
padding-right:50px;
}
#menulist li img{
display:block;
}
</style>
<div id="container" style="">
<div id="top">
<img src="joblove.jpg" style="float:right;">
<div id="title" style="width:500px;text-align:center;">
<h1>"THE TOUGHEST JOB YOU'LL EVER LOVE:"</h1>
<p style="font-size: 1.6em;">A RESOURCE FOR THOSE THINKING ABOUT A CAREER IN DIRECT CARE</p>
</div>
</div>
<div id="menulist">
<ul class="horizlist" >
<li>
<img src="images/purplestyle_11_home.png"></img><span>Home</span>
</li>
<li>
<img src="images/purplestyle_01_heart.png"><span>Brochure</span>
</li>
<li>
<img src="images/purplestyle_05_cut.png"><span>Video</span>
</li>
<li>
<img src="images/purplestyle_15_buddies.png"><span>Personality</span>
</li>
<li>
<img src="images/purplestyle_03_folder.png"><span>Resources</span>
</li>
<li>
<img src="images/purplestyle_02_talk.png"><span>FAQ</span>
</li>
</ul>
</div>
<img src="phone.jpg">
<ul class="horizlist">
<li><button type="button">Click </li>
<li></li>
</ul>
</div>
Add an height to #menulist in css :
#menulist ul{
width:360px;
height:100px;
}
Use CSS backgrounds. They give you more control over image positioning and require less mark-up.
HTML:
<a class="home" href="home">Home</a>
CSS:
.horizlist a {
display:block;
background-repeat:no-repeat;
padding-top: 20px;
padding-left: 20px
background-position: 10px 10px;
a.home {
background-image:url(/images/purplestyle_11_home.png);
}
Can can adjust the padding and background-position values to suit. Repeat as needed.
I'm trying to build a site with a fixed left sidebar of 220px and a fixed page filling the rest of the screen. I'm attempting to fill the page section with an image and have information over the top. The code works fine in Chrome and Firefox but can't get to work in IE.
Can anyone offer any suggestions for a better alternative I'd imagine without using absolute divs?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrap">
<div id="sidebar">
<div class="logo">
<a id="logo"> <img src="LOGO.png"/></a>
</div>
<ul class="navigation red" id="red">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Gallery</li>
<li>Shop</li>
</ul>
</div>
<div id="page" style="padding:0 !important;">
<img src="images/back.jpg" class="back" alt=""/>
<div id="center">
<div class="header">
<center> <h3 class="page_title">Website Title</h3></center>
</div>
<!-- services -->
<div class="section group">
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
<div class="one_half first">
<div class="column_content">
<h4> Title</h4>
<img src="images/2.png"/>
<p> <small>Text text text text text text text text text text text text text text text text text text . </small></p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
background:#FFF;
font-size:14px;
height:100%;
width: 100%;
}
div#wrap {
width:100%;
max-width:100%;
overflow:hidden;
margin:0 auto!important
}
div#sidebar {
width:220px;
height:100%;
float:left;
background: #FFF;
border-right:1px solid #2e2f2f;
position:fixed
}
div#page {
height:100%;
left:220px;
right:0px;
background: #FFF;
position:absolute;
padding:2% 5%;
}
div#center{
margin:0 auto !important;
width:100%;
height:auto;
z-index:1000;
background:rgba(255,255,255,0.5);
}
.group {
padding: 0 20px 0 20px !important;
position:absolute;
z-index:10;
bottom: 20px !important;
left:0;
right:0;
max-width:850px;
margin:0 auto !important;
display:inline-table;
}
.header {
padding:0 20px 0 20px !important;
position:absolute;
z-index:10;
top: 8% !important;
left:0;
right:0;
max-width:850px;
margin-left:auto !important;
margin-right:auto !important;
}
img.back{
min-height:100%;
min-width:1024px;
width:100%;
height:auto;
}
.one_half {
font-size: 17px;
float:left;
width:50%;
overflow:hidden;
}
Been trying to get my head round this for a while now and not making any progress any help would be very appreciated.
Thanks!
--- EDIT ---
Don't think I made clear it's the group and header divs i'm trying to center and which aren't in IE
If this isn't what you want, I'd need you to explain your requirements better.
http://jsfiddle.net/HhddF/
.back {
background-color:#3D6AA2;
height:100%;
width:100%;
}
I'm trying to implement a design I created in photoshop. I want to use the 16 column 960 GS, but the problem is that I only want the content bound by the 960 width.
I have backgrounds for 4 seperate areas. Header, the content area, a top footer that is links, and the bottom footer with the copyright in it.
The top half of the page works fine. The backgrounds show, the text is in the right place. The problem comes with the footer. If the data in the content area expands beyond the minimum height for the content area, the links in the top footer are pushed down, but the backgrounds remain stationary. I suspect this is because the content is all floating and doesn't push the background divs when the content expands.
How do I have a background that is full width while using 960 gs and make it so the footer slides down when the content expands?
Here's the basic wrapper for my site. I realize this may not work for what I want to do.
<body>
<div id="header">
<div class="container_16">
</div>
</div>
<div id="content">
<div class="container_16">
</div>
</div>
<div id="footer-top">
<div class="container_16">
</div>
</div>
<div id="copyright-footer">
<div class="container_16">
</div>
</div>
</body>
the 960 GS css is here: http://www.spry-soft.com/grids/grid.css?column_width=40&column_amount=16&gutter_width=20
My CSS - I've ommited the elements that have to do with specific content, as this is just about getting the layout right:
html, body
{
height: 100%;
}
body
{
color: #f7f3e7;
margin:0;
padding:0;
background-color: #f7f3e7;
line-height: 1.2em;
font-size: 0.8em;
font-family: Verdana, Arial, Sans-Serif;
}
#header
{
height: 100px;
margin:0;
padding:0;
background: #666666 url(content/images/Home-Header-Bg.jpg) repeat-x;
}
#content
{
min-height: 550px;
/*min-height: 546px;*/
margin:0;
padding:0;
background: #f7f3e7 url(content/images/Home-Content-Bg.jpg) repeat-x top;
}
#top-footer
{
font-size: .8em;
min-height: 188px;
margin:0;
padding: 6px 0 6px 0;
background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}
#copyright-footer
{
height: 32px;
vertical-align: middle;
font-size: 0.8em;
line-height: 32px;
margin:0;
padding:0;
background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}
header, content, footer-top, and copyright-footer all have the background set and height or minimumheight.
Really what I want is the header set at 100px tall. The copyright footer is a set 42px tall. The top footer is set at 200 px tall. I want the bottom of the copyright footer to always rest on the bottom of the page if the content area is short enough that the footer wouldn't touch the bottom of the page. If the content area expands, I want the footer to slide down. I want the backgrounds for all sections to be 100% - that is, however wide the browser is, but I want my content bound by the 960 grid system.
Any suggestions?
EDIT: added the CSS as requested
I would create a div called 'content' that would contain the other divs and make the other divs' position relative. The 'content' div would have the appropriate width for what you want to do. Also, for each column you can use the 'float' css property.
Just wrap the container classes with <div> tags and style those. Remember to add .clear divs after every "row" in the containers (even if you have only one "row"), or it will not work properly.
<div id="container">
<div class="container_16">
<div class="grid_16"><h1>Hello, World!</h1></div>
<div class="clear"></div> <!-- Important! -->
</div>
</div>
I figured it out. I needed to make my footer float.
The Markup:
<body marginwidth="0" marginheight="0 leftmargin="0" topmargin="0">
<div id="page-wrapper">
<div id="header" class="container_full">
<div class="container_16">
<div id="logo" class="grid_4 alpha"><img src="content/images/logo-beta.png" /></div>
<div class="grid_10 push_0">
<ul id="navigation" class="clearfix-header">
<li><a class="header-link" href="#">About</a>
<span class="sub-navigation">
<a class="sub-link" href="#">Info</a>, <a class="sub-link" href="#">Terms</a></li>
</span>
</li>
<li><a class="header-link" href="#">Account</a>
<span class="sub-navigation">
<a class="sub-link" href="#">Sign In</a>, <a class="sub-link" href="#">Sign Up</a>
</span>
</li>
</ul>
</div>
</div>
</div>
<div id="content" class="container_full">
<div class="container_16">
<div id="page-content" class="grid_16">Page Content</div>
</div>
</div>
<div id="footer">
<div id="top-footer">
<div class="container_16">
<div class="grid_3">
<h4>Navigation</h4>
<ul>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
</ul>
</div>
<div class="grid_3">
<h4>Navigation</h4>
<ul>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
<li>Sample Link</li>
</ul>
</div>
<div class="grid_7">
Big content area
</div>
<div class="grid_3">
<h4>Boring Stuff</h4>
<ul>
<li>Terms of Use</li>
<li>Privacy Policy</li>
<li>Legal Mumbo-jumbo</li>
</ul>
</div>
</div>
</div>
<div id="copyright-footer">
<div class="container_16">
<div class="grid_16">
Copyright statement
</div>
</div>
</div>
</div>
</div>
</body>
The CSS:
#footer
{
width:100%;
float: left;
height: 232px;
position: relative;
clear:both;
}
#top-footer
{
width:100%;
font-size: .8em;
height: 200px;
margin:0;
padding: 6px 0 6px 0;
background: #a67c52 url(content/images/Top-Footer-Bg.jpg) repeat-x top;
}
#copyright-footer
{
width:100%;
height: 32px;
vertical-align: middle;
font-size: 0.8em;
line-height: 32px;
margin:0;
padding:0;
background: #976f46 url(content/images/Copyright-Footer-Bg.jpg) repeat-x;
}