I have a list like this:
<html>
<head>
<link type="text/css" rel="stylesheet" href="testli.css">
</head>
<body>
<ul id='grok'>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title, max two lines.</p>
<p>Some longish text, max two lines, causes problems when too long.</p>
</div>
<div style='clear:both'></div>
</li>
<li>
<img src='na' class='cimg' />
<div class='cinner'>
<p>Title</p>
<p>Some longish text here which may wrap some and cause problems..</p>
</div>
<div style='clear:both'></div>
</li>
</ul>
</body>
</html>
// testli.css
* {
margin:0;
padding:0;
}
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
background-color: lightgreen;
margin: 5px;
padding: 5px;
text-align: left;
}
.cimg {
width:70px;
height:44px;
float:left;
}
.cinner {
float: left;
margin: 0px;
padding: 0px;
margin-left: 10px;
font:14px;
}
when the text in the p elements is short, the layout behaves as I want - the thumbnail and the text should appear as if they're in two separate columns. I'm basically looking to recreate the thumbnails youtube has for recommended items - thumbnail on the left, some text in another column to the right of it. Title and text each allowed two lines of text each.
If the text is too long, the cinner div gets placed below the thumbnail. What's the right way to force it to always be to the right?
Thanks
You could do it by setting a min-height on the <li> and then absolutely positioning the image to the left of the title and description:
#grok {
list-style-type: none;
width: 200px;
}
#grok li {
position: relative;
margin: 5px;
padding: 5px;
min-height: 44px;
/* min-height fix for IE6. Ideally this would be in an IE6 only stylesheet */
height: auto !important;
height: 44px;
background-color: lightgreen;
}
.cimg {
position: absolute;
left: 0;
top: 0;
width: 70px;
height: 44px;
}
.cinner {
padding: 0 0 0 80px; /* Makes room for the image so it doesn't overlap text */
font: 14px;
}
Add max-width to .cinner (if I don't mistaken - max-width: 110px).
Related
I am pretty new to this. I am hoping for some help and advise keeping my divs side by side. One is a menu which works fine but now my content is overlapping and I'm not sure what I did. I should make multiple saves. any advice on positioning my divs would be crazy appreciated.
apologies if my formatting of the post is wrong. brain is fried and my website is due for class tomorrow.
body {
background-color: #35455e;
}
h1 {
text-align: center;
font-size: 400%;
color: #ecb3ff;
padding-left: 30px;
}
h2 {
text-align: center;
font-size: 300%;
color: #ecb3ff;
padding-left: 40px;
}
ul {
list-style: none;
overflow: hidden;
list-style: none;
text-align: center;
border-style: hidden;
}
a {
color: white;
text-decoration: none;
font-size: 125%;
padding-left: 12px;
}
a:hover {
color: #fff666;
}
a:active {
color: #9bc1ff;
}
div.header {
background-image: url("https://scontent-sea1-1.xx.fbcdn.net/v/t1.0-
9/22089728_10212094710577763_385045730802353501_n.jpg?
oh=534f6bd3108f6f68f96cf5709e404b9f&oe=5AD4BADA");
background-size: initial;
background-repeat: repeat;
border-radius: 8px;
height: 573px;
width: 449px;
border: 10px;
box-shadow: 10px 10px 5px #333333;
float: left;
position:fixed;}
div.main{
position: relative;
top: 500px;
right: 500px;
}
li {
width: 30%;
}
My HTML:
<!DOCTYPE html>
<html>
<head>
<title>Madison Queen's Art Portfolio: Home</title>
<link rel="stylesheet" type="text/css" href="final.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>Madison Art Portfolio</h1>
<ul>
<li>Home</li>
<li>Photography</li>
<li>Contact</li>
</ul>
</div><!--closing of header-->
<div class="main">
<h2>Madison Art Portfolio</h2>
</div><!--CLOSING OF MAIN-->
</div><!--CLOSING OF THE CONTAINER-->
</body>
</html>
As you are using position:fixed; in div.header and position:relative; in div.main you can change the stack of them using z-index value in CSS. if you want your header on the front side and main on the back side then add z-index:2 in div.header and z-index:1 in div.main.
it is overlapping because you have specified the fixed position to the header which is placing the header on the fixed place and anything on the page will overlap with the header. you can try position:absolute
Remove all the code from div.main. It's not required. Also remove position: fixed from the div.header block.
I have two buttons that appear side by side. The idea is that whenever the screen width changes, the buttons will grow or shrink accordingly. This is working fine. However, I'd like to have a 10px distance between the buttons, no matter what the screen width is. In my case as the screen width grows, the gap also grows which I'd like to avoid.
Here is the test code I have been working with:
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
}
a.left, a.right {
display: block;
width: 49%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
float: left;
}
a.right {
float: right;
}
</style>
</head>
<body>
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
</body>
</html>
I can tell that giving a 1% to the gap will make it grow with the screen, but I'm trying to find a way of giving the gap a fixed size while having the button behave as expected.
EDITED TO ADD: I'm looking for a solution which not only would keep the gap fixed but that will also keep the left and right margins fixed as well. So 5px space to edge, button, 10px gap, button, 5px space to edge.
Thanks for any help you can provide.
I have a solution in this fiddle.
HTML
<div class="buttons">
<div class="button-container">
<a class="button">first</a>
</div><div class="button-container">
<a class="button">second</a>
</div>
</div>
CSS
.buttons {
width: 100%;
box-sizing: border-box;
padding: 0;
}
.button-container {
display: inline-block;
width: 50%;
box-sizing: border-box;
border: none;
padding: 0;
margin: 0;
}
.button {
display: block;
box-sizing: border-box;
background-color: #f00;
text-align: center;
padding: 5px;
}
.button-container:nth-child(odd) .button {
margin-right: 5px;
}
.button-container:nth-child(even) .button {
margin-left: 5px;
}
Key points to take home. Firstly, you need to avoid any whitespace between the inline-block elements .button-container to avoid a rendered space. Otherwise, setting width:50% will end up wrapping (because your have two 50% wide items with an intervening space, which is more that 100% width). Secondly, using .button-container allows you to evenly split the buttons across the page using a set percentage. The spacing between buttons then becomes a margin interior to the container.
That's due to the fact that you links are aligned to the outer borders (via float), not to each other. To change it the way you want, remove the floats and center them, plus add a 10px margin-right on the left one:
(for the snippet I reduced the width to 48% since otherwise it won't fit into a small screen)
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
box-sizing: border-box;
padding: 0 5px;
text-align: center;
}
a.left, a.right {
display: inline-block;
width: 48%;
box-sizing: border-box;
background-color: #f00;
text-align: center;
}
a.left {
margin-right: 10px;
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
So here's a new version, fulfilling your later added additional requirements.
It gives the buttons absolute position and defines their width by defining their left and right borders 5px from the outer border and 5px each from the center (adding up to a 10px distance between them), using calc:
body {
margin:0;
padding: 0;
}
div.buttons {
width: 100%;
height: 1.6em;
}
a.left, a.right {
position: absolute;
display: block;
background-color: #f00;
text-align: center;
}
a.left {
left: 5px;
right: calc(50% + 5px);
}
a.right {
right: 5px;
left: calc(50% + 5px);
}
<div class="buttons">
<a class="left" href="">One</a>
<a class="right" href="">Two</a>
</div>
I need to vertically align with CSS multiple elements inside my header.
At the moment, I am using this structure:
-Header
-Content div (This only set my width to 940 with paddings of 10px each side)
-Element 1 (Height: Known, 50px)
-Element 2 (Height: Unknown, bigger fonts)
-Element 3 (Height: Unknown, smaller fonts)
So I need to vertically align to the middle (50% of my header - size of the element) all of my elements and I need to make it cross-browser compatible...
I've found some suggestion by searching such as using a floater div, however I had a hard time trying to align all of my elements since they are not all of the same size...
EDIT
As requested, here is my HTML and CSS:
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/mediadevis.css" />
</head>
<body>
<header>
<div class="content">
<div id="logo"></div>
<nav>
<ul>
<li>Accueil</li>
<li>Nos services</li>
<li>Notre compagnie</li>
<li>Nous joindre</li>
</ul>
</nav>
<div id="lang">English</div>
</div>
</header>
</body>
</html>
CSS:
body {
margin: 0;
background-color: #336699;
}
header{
background-image:url('../IMG/bg_top.png');
height: 90px;
}
nav > ul{
float: left;
list-style-type:none;
margin:0;
margin-left: 10px;
padding:0;
color: #ffffff;
}
nav > ul > li{
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
padding: 10px;
}
.content{
margin: auto;
width: 940px;
padding-right: 10px;
padding-left: 10px;
}
#lang{
float: left;
}
#logo{
background-image:url('../IMG/logo.png');
height: 50px;
width: 180px;
float: left;
}
Try these suggestions from Smashing Magazine:
http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
Specifically, try this code, using the TOP, LEFT, RIGHT, and BOTTOM properties to position your elements:
HTML
<div class="magix">
magix!
</div>
<div class="more-magix">
More Magix!
</div>
CSS
.magix{
background: red;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 0;
right: 0;
width: 100px;
}
.more-magix {
background: blue;
bottom: 0;
height: 100px;
left: 0;
margin: auto;
position: absolute;
top: 500px;
right: 0;
width: 100px;
}
OR, check out Chris Coiyer's methods:
http://css-tricks.com/centering-in-the-unknown/
I tried to make a banner for my website I'm creating, but when I add it to my website, it turns out really bad with the text. I'm wondering if I can add text to my banner using HTML5 and / or CSS.
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Play - Learn - Grow</title>
<link rel="stylesheet" href="main.css">
</head>
<body class="body">
<span class="banner_h">
<img src="Images\Top_Banner_4.png" alt="Banner" height="150" width ="1240"/>
</span>
<nav>
<ul class="nav">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
<li>Become a Member</li>
<li>Borrow Toys</li>
<li>Our Policies</li>
<li>Site Map</li>
</ul>
</nav>
<span class="banner_l">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<span class="banner_r">
<img src="Images\Side_Banner.jpg" alt="Banner" />
</span>
<h2 class="headers">Welcome to the Home Page!</h2>
<div class="container">
Our aim is to provide the children of the community with an ever-changing variety of educational and fun toys to enhance
their cognitive, social, emotional and physical development in the important first six years of their lives.
<br><br><span class="Links">Be sure to check out our Wikispace site with more information here!</span>
</div>
<div id="content"></div>
<div id="footer">
Copyright © 2013
</div>
</body>
</html>
CSS:
/* Entire Document CSS */
html{
height: 100%;
}
/* Header CSS */
.headers{
color: #FFD89A;
text-align: center;
padding: 10px;
}
/* Body CSS */
.body{
background-color: #61B329;
height: 50%;
color: #FFFFFF;
}
.container{
margin: 0 auto 0 auto;
width: 50em;
text-align: center;
padding-bottom: 500px;
height: 50%;
}
/* Navigation CSS */
.nav {
display: inline-block;
background-color: #00B2EE;
border: 1px solid #000000;
border-width: 1px 0px;
margin: 0;
padding: 0;
min-width: 1000px;
width: 100%;
}
.nav li {
list-style-type: none;
width: 14.28%;
float: left;
}
.nav a {
display: inline-block;
padding: 10px 0;
width: 100%;
text-align: center;
}
/* Banner / Picture CSS / Text in Images */
.banner_l{
float: left;
}
.banner_r{
float: right;
}
.banner_h{
display: block;
width: 100%;
}
.banner_h img{
width: 100%;
}
/* Footer CSS */
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
#content {
padding-bottom: 3em;
}
/* Link CSS */
a:link{
color: #FFFFFF;
text-decoration: none;
}
a:visited{
color: #FFFFFF;
text-decoration: none;
}
a:hover{
background-color: #028482;
color: #FFFFFF;
text-decoration: underline;
}
a:active{
background-color: #FCDC3B;
color: #AA00FF;
text-decoration: overline;
}
.Links A:hover{
color: #028482;
background-color: transparent;
text-decoration: underline overline;
}
I'm trying to center / centre my text on the banner, with a white coloured font (font can be varied). What do I have to do to make this happen? Thanks!
It depends on the kind of text you will be adding to the banner. If you want to add text that will be static (as in, it will never or rarely change) and want to add custom fonts, you should probably edit the image in Photoshop.
On the other hand, if the content in the banner will change constantly, then I would suggest adding the image as a background. Your banner h class would look something like this:
.banner_h{
display: block;
width: *actual pixel size of the banner*;
height: *actual pixel size of the banner*;
background: url('*location of file*') no-repeat;
}
If you leave the width to a percentage what will happen is that the div will not have anything inside of it and thus will not show the banner, so you need to figure out what the actual width and height of the banner is and put it in this CSS declaration so that it shows the banner.
Once you have done this, delete the image from the tag and replace it with the content you wish to add.
I have this problem. I searched the site and others were having similar problems, but none of the answers seemed to work. Those included setting line-height to 0px; and setting all margins/paddings to 0px. I use Google Chrome's Inspect Element material to check the margins/paddings. I hovered over my "a" element and "li" element to see if they had any unnecessary paddings or margins, but they didn't.
What was weird is that they had a little white space, not occupied by any element in the entire document, between each link.
Right now, as there are no borders between the text, it is unrecognizable, but the space around the "a" in Link4 is smaller than the space around the text in Link1. The width of the first "li" element is strangely 4px wider than the 4th "li" container, and there is a little white space. I want to get rid of the white space, any ideas?
Here is the code:
CSS:
html {
overflow-y: scroll;
}
body {
background-color: #ffdeff;
overflow: hidden;
}
#wrapper {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
background-color: white;
border-left: 1px solid rgb(210, 210, 210);
}
#header {
width: 1000px;
height: 0px;
overflow: hidden;
margin: auto;
}
#header-toolbar {
width: 1000px;
list-style-type: none;
border-radius: 3px;
position: absolute;
}
#nav-position {
position: absolute;
float: left;
padding: 0px;
margin: 0px;
}
.nav-link-container {
background-color: #FF66CC;
display: inline;
padding: 0px;
text-align: center;
}
.nav-link {
padding: 0px;
margin-top: 5px;
margin-bottom: 5px;
text-align: center;
line-height: 0px;
display: table;
display: inline;
margin: 0 auto;
}
HTML document:
<body>
<script src="jquery-1.9.1.js"></script>
<script>
</script>
<div id="wrapper">
<div id="header">
<div id="header-toolbar">
<ul id="nav-position">
<li class="nav-link-container">
<a class="nav-link">Link1</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link2</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link3</a>
</li>
<li class="nav-link-container">
<a class="nav-link">Link4</a>
</li>
</ul>
</div>
</div>
<div id="main"></div>
<div id="footer"></div>
</div>
</body>
</html>
Anything helps! Thank you very much!
there are some spaces when you put <li> to new line. so one solution is to add them all in same line like here: http://jsfiddle.net/6tzxj/1/