I want to have something like this:
================================
====IMAGE==============TEXT=====
================================
and I used:
.menu {
background-color: red;
padding: 40px;
text-align: right;
}
.menu img {
float: left;
}
Result:
================================
=======================TEXT=====
====IMAGE=======================
How can I do this?
I think that you have to use line-height with height in your text and set a width to your menu, something like:
<div class="menu">
<div class="img">
<img src="http://placehold.it/350x50" />
</div>
<div class="text">
<p>your text</p>
</div>
</div>
.menu {
background-color: red;
text-align: right;
width:100%;
}
.menu img {
float: left;
}
.menu text {
float: left;
}
.text p{
height:50px;
line-height:50px;
}
DEMO
You would need the image to be first in the markup. Float will make inline items wrap around something, but only the inline items that come after it in the markup.
Elements are not getting exact float and width property.
.menu {
background-color: red;
padding: 40px;
float: right;
max-width: 40%;
}
.menu img {
float: left;
max-width: 60%;
}
Now try to wrap them and use
.wrapper {
display: inline-block;
}
Related
I have the following elements. The image is fixed at 325X70px and is placed at the top left corner. I want the list items, evenly spaced, to fill the remainder of the width and be responsive to browser resize. I'm sure this is easy, but I can't seem to get it to work.
<div class="wrapper">
<div class="left">
<div class="image">Image Here</div>
</div>
<div class="menu">
<ul>
<li>X</li>
<li>Y</li>
<li>Z</li>
<li>A</li>
</ul>
</div>
</div>`
CSS
* {
padding: 0px;
margin: 0px;
}
.wrapper {
position: relative;
}
.left {
float: left;
}
.image {
min-width: 325px;
max-width: 325px;
height: 70px;
background-color: red;
}
.menu {
width: 100%;
height: 70px;
background-color: black;
}
.menu ul {
position: absolute;
width: 100%;
height: 70px;
display: table;
}
.menu li {
color: #FFF;
width: 25%;
text-align: center;
vertical-align: middle;
display: table-cell;
list-style-type: none;
}
You may not need the .left class, you might be able to just do that styling on the image itself, but regardless, what needs to happen here is that .left and .menu need to be side by side. To do that...
.left,
.menu {
display: inline-block;
vertical-align: middle;}
We know the image is always 325px wide, so let's set the parent container to match...
.left {
width:325px;}
And then we want .menu to be the entire width of the screen, minus that image/container, so can we do this...
.menu {
width: calc(100% - 325px);}
You'll still have to turn your li horizontal...
li {
display: inline-block;
vertical-align:middle;}
My current work is shown below. What I would like to achieve is that the text Membership Registration is aligned center, while the hyperlinks English and 中 文 is floating right but close to border-bottom - Now they are floating to the top.
HTML:
<div id="Header">
<a id="logo" href="http://localhost"><img alt="logo" src="images/logo.jpg"/></a>
<div id="HeaderText"><h1>Membership Registration</h1></div>
<div id="header_right">
English |
中文
</div>
</div>
CSS:
#Header {
height:70px;
margin-bottom:11px;
border-bottom: #dbe0e3 1px solid;
}
#header_right {
float: right;
padding-right: 50px;
}
#logo {
float: left;
height:65px;
left:20px;
top:17px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
#HeaderText {
float: left;
text-height: 65px;
text-align: center;
left: 50%;
}
Add padding-top to #header-right.
#header_right {padding-top: 30px;}
http://jsfiddle.net/e67wd21v/1/
Note to your code:
left and top do nothing when the element has no position property (#logo)
text-height property doesn't exist (used at #headerText) - you probably meant height or line-height.
update css for header_right
#header_right {
float: right;
padding:30px 50px 0 0;
box-sizing:border-box;
}
check fiddle
http://jsfiddle.net/swapnilmotewar/sh72pgmx/1/
I am finding it difficult to center a text in between two other texts.
HMTL:
<div class="main-container">
<div class="footer">
<span class="left_edge">#left</span>
<span class="center">#center</span>
<span class="right_edge">#right</span>
</div>
</div>
CSS:
.footer{
background: #e33;
padding: 5px;
}
.left_edge{
float: left;
}
.center{
float: left;
}
.left_edge{
float: right;
}
How do I perfectly center the .center as shown in the correctly marked image?
One approach would be to set the display of the middle element to inline-block and then use text-align: center on the parent element for horizontal centering:
Example Here
.footer {
background: #e33;
padding: 5px;
text-align: center;
}
.left_edge {
float: left;
}
.center {
display: inline-block;
}
.right_edge {
float: right;
}
Alternatively, you could avoid floating the elements, and use the following method instead:
Example Here
.footer > span {
display: inline-block;
width: 33.333%
}
.left_edge {
text-align: left;
}
.center {
text-align: center;
}
.right_edge {
text-align: right;
}
I need this text to wrap, but I don't understand why it isn't. If it gets to long, it simply falls below the image.
<style>
.discussion {
width: 50%;
min-height: 100px;
margin: 0 auto;
}
.discussion img {
margin: 12.5px;
float: left;
}
.discussion a {
text-decoration: none;
margin-top: 12.5px;
display:inline-block;
}
#discussion_title {
font-size: 22px;
color: #3f3f3f;
margin-top: 5px;
}
</style>
<div class="discussion">
<img src="http://images.elephantjournal.com/wp-content/uploads/2013/01/mirror_cat-500x500.jpg" width="75" height="75" />
<div class="discussion_text">
blah blah blah
</div>
</div>
JSFiddle
You can do it like this
Remove display: inline-block of .discussion a and add
.discussion_text {
display: inline;
}
Try this:
.discussion img {
margin: 12.5px;
float: left;
display:inline;
width:10%; /* Whatever it should be*/
}
.discussion a {
text-decoration: none;
margin-top: 12.5px;
float: right;
display:inline-block;
}
You have to put a float:left too on the discussion_text and make it have a fixed width.
Don't use inline for a, that way, you will not be able to customize it any further as inline elements can not be styled easily and in very limited manner!
inline-block will make a only equal to width of the content .
Just amend this part and all is good
.discussion a {
text-decoration: none;
margin-top: 12.5px;
display:block; //changed from inline-block
}
demo
Also, you have used excess CSS to achieve your target, it can be trimmed down!
It's caused by the .discussion a { display: inline-block; }, so you can either remove that or change it to .discussion a { display: block; } for text to flow around the image nicely, article-style.
http://jsfiddle.net/9aMxg/2/
Or you can add the following for discussion_text not to wrap, but it will stay in a column, not flow around the image:
.discussion_text {
overflow: auto;
}
http://jsfiddle.net/MfadJ/
I'm working on the header of a website. I've looked around stackoverflow for instructions on how to center the header (includes logo & navigation bar).
I'm using Dreamweaver CC and when I click the preview button, it shows up on the browser centered, but the right has more white space than the left.
My current CSS:
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.header_left {
float: left;
width: 300px;
}
.navi {
float: right;
width: 600px;
}
.navi li {
list-style: none;
display: inline;
}
My Current HTML:
<body id="home">
<div id="header">
<div class="container">
<div class="header_left">
<img src="../images/bestfoodservicesweb_04.jpg" width="208" height="69"/>
</div>
<div class="header_right">
<ul class="navi">
<li><img src="../images/bestfoodservicesweb_07.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_09.jpg" width="88" height="56"/></li>
<li><img src="../images/bestfoodservicesweb_11.jpg" width="88" height="56"></li>
<li><img src="../images/bestfoodservicesweb_13.jpg" width="88" height="56"></li>
</ul>
<div style="clear: both"></div>
</div>
</div>
EDIT: Sample of what it looks like
Trying to understand the problem. The header as a whole is centered. The elements inside have margin issues due to specifying width on the images and then giving the class a different width as well. You can remove the width in the class and it will push each floated element flush to the their specified sides. Then add margin to push them the distance you would like:
body, html {
width: 100%;
height: auto;
margin: 0;
}
.container {
background: #333;
width: 1000px;
margin: auto;
text-align: center;
}
.header_left {
float: left;
margin-left: 70px;
margin-top: 12px;
}
.navi {
float: right;
margin-right: 60px;
}
.navi li {
list-style: none;
display: inline;
}
http://jsfiddle.net/derekstory/zz2Dy/3/
text-align:center and float don't make good friends :)
test this : setting ul as inline-block element and not floatting: http://jsfiddle.net/zz2Dy/2/
.container {
width: 1000px;
margin-right: auto;
margin-left: auto;
text-align: center;
background:#333;
}
.header_left {
float: left;
}
.navi {
display:inline-block;
padding:0;
margin:0;
}
.navi li {
list-style: none;
display: inline;
}
The right header element has the property text-align: center, and it doesn't occupy the entire width of the element, so it ends up with more white space on the right. If you add to your fiddle the class:
.header_right {
text-align: right;
}
That should remove the white space on the right.
(if I understood your issue properly)
I believe this is what you are looking for:
.container {
margin: 0 auto;
text-align: center;
}
.header_left {
display: inline-block;
}
.header_right {
display: inline-block;
}
.navi {
display: inline-block;
padding: 0;
}
.navi li {
list-style: none;
display: inline;
}
Demo
Basically, I've removed floats and widths and padding, used display: inline-block;.
<img src="../images/bestfoodservicesweb_07.jpg" style=" display: block;
margin-left: auto;
margin-right: auto;"/>