I have a (left) div which width is set to 30% of the containing parent.
Inside that div I have a paragraph that ignores the column margin. How do I make the text to be wrapped inside the parent div (container)?
the css
body {
margin:0;
padding:0;
border:0;
background-image:url(../img/Background.png);
}
#container {
width:960px;
border:2px solid red;
margin:auto;
}
#header {
margin-top:10%;
border: 1px solid green;
height:150px;
background: #000;
}
ul {
list-style:none;
}
li {
font-size:1.5em;
display:inline-block;
float:right;
margin: 40px;
color:white;
}
img {
border: 1px solid #39C;
}
.left {
width:30%;
height:500px;
border: 1px solid #93F;
}
.left p {
}
and the html
<body>
<div id = container>
<div id = header>
<img src="img/firma.png" width="231" height="80"/>
<ul>
<li> Home </li>
<li> Cds </li>
<li> Bio </li>
<li> Contacts </li>
</ul>
</div> <!--end of header-->
<div class = "left">
<p> fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo </p>
</div> <!--end of left-->
</div> <!--end of container-->
</body>
Add the CSS rule word-wrap:break-word to your .left class:
.left {
width:30%;
height:500px;
border: 1px solid #93F;
word-wrap:break-word;
}
jsFiddle example
https://developer.mozilla.org/en-US/docs/Web/CSS/word-wrap
You may use word-wrap property. Example: http://jsfiddle.net/r7EdS/
.left p {
word-wrap: break-word;
}
Related
There are two columns in the container,the left one is the png photo and the right is ul elements.
Both of them were set in the center of the div containers.
div.whole{
width:620px;
overflow:auto;
border:2px solid red;}
div.left,div.right{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
float:left;
width:300px;
height:200px;
}
div.box_left{
width:120px;
height:120px;
}
div.box_right{
overflow:auto;
float:left;
}
li{
list-style:none;
display: inline-block;
vertical-align: middle;
padding 0 0 0 0;
display:inline-block;
border-bottom: 1px dashed black;
width:100px;}
<div class="whole">
<div class="left">
<div class="box_left">
<img src="images/pic.png" width="120" height="120"/>
</div>
</div>
<div class="right">
<div class="box_right">
<ul>
<li>x1</li><li>y1</li>
</ul>
<ul>
<li>x2</li><li>y2</li>
</ul>
<ul>
<li>x3</li><li>y3</li>
</ul><ul>
<li>x4</li><li>y4</li>
</ul>
</div>
</div>
</div>
There are five div containers here:div.whole,div.left,div.box_left,div.right,div.box_right.
It is a little burdensome for the simple work,5 div containers.
Can i reduce two of them to get the same effect?
Something like this:
div.whole {
width:620px;
display:table;
border:2px solid red;
}
div.left, div.right {
text-align:center;
display: table-cell;
width:300px;
height:200px;
vertical-align:middle;
}
ul{ padding:0; }
li {
text-align:left;
list-style:none;
display: inline-block;
vertical-align: middle;
padding 0 0 0 0;
display:inline-block;
border-bottom: 1px dashed black;
width:100px;
}
And html:
<div class="whole">
<div class="left">
<img src="images/pic.png" width="120" height="120"/>
</div>
<div class="right">
<ul>
<li>x1</li><li>y1</li>
</ul>
<ul>
<li>x2</li><li>y2</li>
</ul>
<ul>
<li>x3</li><li>y3</li>
</ul><ul>
<li>x4</li><li>y4</li>
</ul>
</div>
</div>
Example: https://jsbin.com/saqecaseji/edit?html,css,output
use text align center for horizontal alignment i.e css text-align:center and
line-height:'some pixel' for vertical center
Can someone explain why min-height:100% on the #content <div> is not working?
Below is the CSS style:
body {
margin:0;
padding:0;
}
ul {
background-image:url(../../globavailable/images/headers/nav2.png);
height:50px;
width:100%;
margin:0;
padding:0;
top:0;
position:fixed;
}
li {
float:left;
list-style-type: none;
}
.listclass {
color:#4571C3;
padding-left:28px;
padding-right:28px;
text-decoration:none;
line-height:47px;
font-size:16px;
background-image:url(../../globavailable/images/headers/line2.png);
background-repeat: no-repeat;
display:block;
}
.listclass:hover {
color:white;
background-color:#4571C3;
/*font-weight:bold;*/
}
ul input[type="text"] {
margin-top:12px;
margin-left:210px;
border: 2px solid silver;
font-family: sans-serif;
font-size: 14px;
}
#content {
width:65%;
min-height:100%;
height:auto;
margin-left: auto;
margin-right: auto;
border-right: 1px dashed #D0D0D0;
border-left: 1px dashed #D0D0D0;
}
#footer {
position: relative;
bottom: 0;
width: 100%;
height:50px;
color:white;
font-weight:border 2px;
text-align:center;
background-color:black;
vertical-align: middle;
line-height: 50px;
/* the same as your div height */
}
.submit-class {
border-radius: 5px;
border: 0;
width: 80px;
height:25px;
font-weight:bold;
font-family: Helvetica, Arial, sans-serif;
font-size:14px;
background: #088A29;
}
.submit-class:hover {
background: #58FA58;
}
Below is the main body HTML:
<nav>
<ul>
<li><img src="../../globavailable/images/z.png" alt="Smiley face" height="47" width="57"></li>
<li>Home</li>
<li>Blog</li>
<li>Events</li>
<li>Contact Us</li>
<li>Members</li>
<li>My Profile</li>
<li>Logout</li>
<li><input type="text" placeholder="Search..."></li>
</ul>
</nav>
<br>
<div id="content"></div>
<!-- content -->
</div> <!-- content -->
<div id="footer">All rights reserved #Chrys</div>
</body>
</html>
You need the parent element to have a size.
Add:
html, body{
height:100%;
}
Without that, the child element doesn't know what 100% height means, as in size = 100% of undefined.
HTH,
-Ted
You need to set the height of the html and body tags to 100% in order for this to work.
html, body {
height:100%
}
Body height needs to be 100% - anything outside the content area will affect this.
A div without content with a percentage of height will not have any visual existence on the page. You need to either make it a set height, have the parent have a height (body) or set height (other div) or put content in it that equals 100% of the height you want to see.
I am trying to create a responsive centered logo header with side navigation. because I want it to be responsive there are no fixed widths which makes it difficult to accomplish the centering (margin:auto). As the window becomes smaller I would like the li tags to sit on top of each other. I do not want to float left and float right the side navigations because I want them to be be attached to the sides of the logo not the sides of the window, with the same amount of space between logo and menu on left and right.
html:
<div id="header">
<div id="nav">
<div id="nav-inner">
<ul id="site_nav_1">
<li id="menu-item">
The Problem
</li>
<li id="menu-item">
Why Sanitize
</li>
</ul>
<div id="logo-nav">
<div id="logo"></div>
</div>
<ul id="site_nav_2">
<li id="menu-item">
About Us
<li id="menu-item">
Sanitize Now!
</li>
</ul>
</div>
</div>
</div>
http://jsfiddle.net/7PhJZ/74/
You need to use media queries and set different styles depending on breakpoints. I would suggest mobile first.
Very rough fiddle at http://jsfiddle.net/7CcjD/ - try changing the width of the Result box.
<div id="header">
<div class="menu-1">Menu 1</div>
<div class="logo">Logo</div>
<div class="menu-2">Menu 2</div>
</div>
div {border: 1px solid #999}
.menu-1 {border-color: red}
.logo {border-color: green}
.menu-2 {border-color: blue}
.menu-1, .logo, .menu-2 {
margin: 1em auto;
width: 80%
}
#header {text-align: center;}
#media only screen and (min-width: 640px) {
.menu-1, .logo, .menu-2 {
border-width: 2px;
width: 20%;
display: inline-block;
}
}
you could use inline-block instead floatting :
http://jsfiddle.net/7PhJZ/75/
#nav {
margin:auto;
display: block;
border: 1px solid green;
}
#nav-inner {
max-width:810px;
height:200px;
margin:auto;
display: block;
border: 1px solid grey;
white-space:nowrap;/* keep them on one line */
}
#header {
position: fixed !important;
overflow: visible;/* auto if fixed would be wised somehow */
padding: 0px;
width: 100%;
top: 0;
left:0;
border: 1px solid purple;
}
#logo-nav {
display: inline-block;
}
#logo {
border: 1px solid blue;
margin: 0px auto 0px auto;
width: 225px;
height: 124px;
}
ul#site_nav_1 {
display:inline-block;
border: 1px solid red;
text-align:right;
max-width:32%;
}
ul#site_nav_2 {
display:inline-block;
border: 1px solid red;
text-align:left;
max-width:29%;
}
li#menu-item {
display:inline-block;
padding:20px;
text-align: center;
}
a {
font-family:'gobold_boldregular';
font-size:25px;
text-transform:uppercase;
letter-spacing: 1px;
text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
/* some reset */
#logo-nav, #site_nav_1, #site_nav_2 {
vertical-align:middle;
}
ul, li {
padding:0;
margin:0;
white-space:normal;
}
As like the title, here is my case.
The header part is ok for me, i manage to center it, but the menu part, i just cant figure it.
This is the HTML Part:
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<div id="menu">
<div id="menu_button">
HOME
</div>
<div id="menu_button">
PRODUCTS
</div>
<div id="menu_button">
GALLERY
</div>
<div id="menu_button">
INFO
</div>
<div id="menu_button">
ABOUT US
</div>
</div>
</div>
Here is the CSS part:
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
float:left;
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu #menu_button{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu #menu_button a:link, #container #menu #menu_button a:visited{
text-decoration:none;
color:inherit;
}
#container #menu #menu_button:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
Looking forward to your reply, thanks.
it is semantically better not to use div for menu (instead use followed by
it's wrong to repeat many times an id (instead use classes, or combine css selectors - for your html #menu-button is the same as #menu div).
Here the html + css corrected with the centered menu
<html>
<head>
<style>
#charset "utf-8";
html, body {
margin: 0px;
padding: 0px;
border: 0px;
font-family:Verdana, Geneva, sans-serif;
background-color:#000;
}
#container {
width: auto;
margin: 0 auto;
padding: 0;
}
#container #topcontain {
margin:20px 0px 20px 0px;
height:120px;
border-bottom:#F90 solid 3px;
}
#container #topcontain #header {
height:120px;
background:-moz-linear-gradient(#ffe2a3, #ffc341); /* FF3.6+ */
background:-webkit-linear-gradient(#ffe2a3, #ffc341); /* Chrome,Safari4+ */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffe2a3,endColorstr=#ffffc341); /* IE */
}
#container #topcontain #header #logo {
width:150px;
height:117px;
margin:auto;
float:left;
}
#container #topcontain #header #title {
width:auto;
position:relative;
margin: 0px 50px 0px 0px;
height:117px;
float:right;
color: #900;
font-size:20px;
font-family:Tahoma, Geneva, sans-serif;
}
#container #menu {
width: 100%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
#container #menu li{
margin:0;
width: 150px;
position:relative;
display:block;
text-decoration:none;
text-align:center;
background:#ffc341;
float:left;
font-size:18px;
color: #000;
border-right: #F90 thin solid;
}
#container #menu li a:link, #container #menu li a:visited{
text-decoration:none;
color:inherit;
}
#container #menu li:hover{
background-color: #F30;
color:#fff;
text-decoration: overline;
}
/*centered menu */
nav ul{
margin: 10px auto;
width: 755px;
}
</style>
</head>
<body
<div id="container">
<div id="topcontain">
<div id="header">
<div id="logo">
Logo Here
</div>
<div id="title">
<h1> THE TITLE HERE</h1>
</div>
</div>
</div>
<nav id="menu">
<ul>
<li>
HOME
</li>
<li>
PRODUCTS
</li>
<li>
GALLERY
</li>
<li>
INFO
</li>
<li>
ABOUT US
</li>
</ul>
</nav>
</div>
</body>
</html>
The centering is obtained giving a specific width to the ul (it could have also been a div or whatever) and giving it an "auto" margin for right and left.
well floating something will mean its taken out of the flow (somewhat) and just, as the title suggests, floating left.
try and remove it:
float:left;
So:
#container #menu {
background: none repeat scroll 0 0 #FFC341;
float: left;
overflow: hidden;
position: relative;
text-align: center;
width: 100%;
}
#container #menu #menu_button {
background: none repeat scroll 0 0 #FFC341;
border-right: thin solid #FF9900;
color: #000000;
display: inline-block;
float: left;
font-size: 18px;
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
width: 150px;
}
Since the width for #menu is set as 100%, it takes up the whole width of the parent element, i.e #container, whose width is auto, i.e the width of the window.
So, you need to set the width of #menu and align it to the center, by getting rid of the float and the following changes :
#container #menu {
width: 755px; /* 151px x 5 elements */
margin:0 auto; /* Instead of padding */
position:relative;
overflow:hidden;
}
and for the yellow background, just wrap your #menu around with a #menuWrapper div, and also as Italy specified, id should be unique on a page. Use class instead.
HTML :
<div id="menuWrapper">
<div id="menu">
<div class="menu_button">
HOME
</div>
<div class="menu_button">
PRODUCTS
</div>
<div class="menu_button">
GALLERY
</div>
<div class="menu_button">
INFO
</div>
<div class="menu_button">
ABOUT US
</div>
</div>
</div>
CSS :
#menuWrapper {
background:#ffc341;
}
Also, it's better to use ul-li elements for the menu items instead of div
Full HTML + CSS : JSFiddle
You may try to modify the container menu in the css part
#container #menu
{
margin:auto;
width:85%;
padding:0 auto;
background:#ffc341;
position:relative;
overflow:hidden;
}
Try this and comment here for any issues..
This is my HTML:
<div class="topmenucontainer">
<div id="topmenu">
<ul>
<li style="border-right: 1px solid black;">Login</li>
<li>Partner Countries</li>
</ul>
</div>
This is my CSS:
.topmenucontainer {
margin:0 auto;
border:1px solid red;
background-color:#000;
display:block;
}
#topmenu {
margin:0 auto;
border:1px solid red;
/*min-height:25px;*/
background-color:#fff;
width:900px;
display:inline;
}
#topmenu ul {
margin:0px; padding:0px;
list-style-type: none;
float:right;
}
#topmenu ul li {
float:left;
}
And This is how it is displayed
http://img842.imageshack.us/img842/8627/3ktn.jpg
Why the UL isn't displayed where I putted it?I mean why isn't it displayed inside my topmenu div which is white backgrounded and only 900px wide?
You need to add a clear:both div to handle the inner floating
<div class="topmenucontainer">
<div id="topmenu">
<ul>
<li style="border-right: 1px solid black;">Login</li>
<li>Partner Countries</li>
</ul>
<div style="clear:both;"></div>
</div>
</div>
I think you don't need any styles on your .topmenucontainer*. you can get rid of the .topmenucontainer styles
you can try the below styles on topmenu. Do you have a final picture of what you are trying to achieve?
#topmenu {
overflow: hidden;
margin: 0 auto;
border: 1px solid red;
background-color: #fff;
width: 900px;
}