bit of a CSS newb here. I'm using the fluid grid layout in Dreamweaver CS6. I created a headercontainer div, then headerleft and headerright divs inside it. I've added an image to headerleft and typed some text in headerright. I want to be able to have the text remain in line with the center of the image no regardless of resizing from the fluid layout.
What's the best way to do this? I put the two headers in a container div hoping that it will make it easy for me to align the two divs within the container, but I'm just not sure how to achieve it. Here's the code I currently have for this section of the page:
EDIT: Code Now says (but still doesn't work):
.gridContainer {
margin-left: auto;
margin-right: auto;
width: 90.5666%;
padding-left: 0.2166%;
padding-right: 0.2166%;
}
#headercontainer {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: left;
}
#headerleft {
clear: both;
float: left;
margin-left: 0;
width: 49.7607%;
}
#headerright {
clear: none;
margin-left: 0.4784%;
width: 49.7607%;
}
And the html says:
<div class="gridContainer clearfix">
<div id="headercontainer">
<div id="headerright">
<h2>Support For All Your Gadgets & Tech!</h2>
</div>
<div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
</div>
</div>
Thanks a lot!
remove display:block; from your #headerleft and #headerright
Also, you can only set float:left; on the headerleft id, and put the div headerright before the left one in your html code.
Try this code:
.gridContainer {
margin-left: auto;
margin-right: auto;
width: auto;
padding-left: 15px;
padding-right: 15px;
}
#headercontainer {
float: left;
margin-left: 0;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
color: #FFF;
text-align: left;
position:relative;
}
#headerleft {
float: left;
margin-left: 0;
width: 50%;
}
#headerright {
clear: none;
margin-left: 50%;
}
<div class="gridContainer clearfix">
<div id="headercontainer">
<div id="headerleft"><h2><img src="images/logo2.png" alt="alt" longdesc="desc"></h2>
</div>
<div id="headerright">
<h2>Support For All Your Gadgets & Tech!</h2>
</div>
</div>
</div>
Related
I am trying to get a fluid navigation bar done in Dreamweaver, which will also change the size of the logo when changing the viewport. This works and looks perfectly, except that the logo image will not stay vertically centered when it gets smaller.
<div class="gridContainer clearfix"> <div id="div1" class="fluid">
<div id="divL" class="fluid"><img src="images/logo.png" alt=""/></div><div id="divR" class="fluid">
<nav id="button1" class="fluid">Link 1</nav>
<nav id="button2" class="fluid">Link 2</nav>
<nav id="button3" class="fluid">Link 3</nav>
</div></div></div>
CSS:
.gridContainer {
padding-left: 0.8333%;
padding-right: 0.8333%;
margin: auto;
clear: none;
float: none;
margin-left: auto;
}
#div1 {
}
#divL {
width: 32.2033%;
text-align: right;
min-height: 65px;
height: 65px;
line-height: 20px;
}
#divR {
width: 66.1016%;
margin-left: 1.6949%;
clear: none;
text-align: center;
font-size: larger;
font-weight: lighter;
line-height: 65px;
}
#button1 {
width: 23.0769%;
margin-left: 0;
}
#button2 {
width: 35.8974%;
margin-left: 2.5641%;
clear: none;
}
#button3 {
width: 35.8974%;
clear: none;
}
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}
I have of course tried many solutions found here and elsewhere, but nothing works since they dont seem to take the side by side elements of mine into account.
As you can see I have already tried playing around with a few stupid tricks in my frustration, but they wont do much either.
I think you need to add vertical-align:middle (img is a inline element like text).
#divL {
display:inline-block;
vertical-align: middle;
}
I am trying to code a website using CSS. My header looks like this below. It is consisted of two child divs - logo and topright. Whenever I minimize the width of the screen, topright gets shunted downwards onto the next row. The two divs are floated left and right respectively, and should share the same row. However, I do not want topright to be shunted to the next row. How can I fix this?
<div id="header">
<div id="logo">
<h1>Logo</h1>
</div>
<div id="topright">
<div id="phone">
<p>here</p>
<h6>Learn about out services</h6> </div>
<div id="ssl">
<img src="images/ssl.png" width="150" height="39" align="right" />
</div>
</div>
My css code is
#header {
width: 100%;
position:relative;
clear:both;
}
#logo {
float: left;
margin-top: 20px;
display: block;
}
#logo h1 {
text-indent: -2000px;
background:url(images/logo.png) no-repeat;
display:block;
}
#logo h1 a {
display:block;
width: 381px;
height: 97px;
}
#topright {
float: right;
margin-top: 20px;
display: block;
}
#phone {
float: left;
background:url(images/phone.png) no-repeat right;
height: 70px;
padding-top: 40px;
padding-right: 60px;
text-align:right;
}
#phone p {
font-weight:bold;
font-size: 1.4em;
}
#phone h6 {
font-weight:bold;
font-size: 0.8em;
color:#6F694F;
}
#ssl {
float: right;
margin-top: 40px;
margin-left: 20px;
}
Put min-width: 1000px into logo's css. This ensures that there is always 1000px, however hidden, that the topright div can fit inside even if it is off the screen.
Honestly - CSS and Divs aint the thing i'm most familiar with. However, I thought that I had managed to make the template for my later design, but it turns out that everything tends to move a bit around for me..
In Chrome, things seems to work at first, but after refreshing a few times, the text "your position on page" jumps down to the next line. In firefox, things are just at the wrong places to begin with.
If possibly, I would also like a nod on, how to get a padding/margin between the position text and again between each line. When adding it now, it just moves everything to completely wrong places.
Demo: http://cityroast.dk
CSS:
section {
width: 100%;
height: 100%;
background: #e8ebef;
padding: 5px;
}
div#catcontainer {
width: 10%;
height: 100%;
float: left;
}
div#categories {
width: 100%;
height: 100%;
float: left;
}
div#ads {
width: 100%;
height: 100%
float: left;
display: box;
}
div#ads span {
font-family: Verdana;
font-size: 12;
text-align: left;
}
div#one {
width: 10%;
height: 80px;
float: left;
}
div#two {
width: 70%;
height: 80px;
background: aqua;
float: left;
text-align: center;
}
div#three {
width: 10%;
height: 80px;
background: red;
float: left;
text-align: right;
line-height: 80px;
}
div a {
text-decoration: none;
color: #000000;
font-family: Verdana;
font-size: 12px;
}
HTML:
<section>
<div id="catcontainer">
<div id="categories">
<ul>
<b>A menu</b>
<li>Something</li>
<li>Something2</li>
<li>Something3</li>
</ul>
</div>
</div>
<div id="ads">
<span>Your position on page</span>
<div id="one">A picture</div>
<div id="two"><b>Title</b></div>
<div id="three"><b>Details</b></div>
</div>
</section>
Obviously, the latter part of the code is echoed 5 times at the moment, to get the 5 lines.
Thanks already!
First question ever, I started working on CSS about a month ago due to a job I got, but it seems I have encountered some problems I can't fix (mainly due to my inexperience and that it's someone else's CSS)
I won't beat around the bush so much and explain the problem before showing the code. There are a set of Div's in a form-like setting, but when the text get's too crowded it invades the next Div so, fixing it via CSS and not HTML, any fix on this? From the very problem I can imagine it's something so easy it's silly, but well, yeah.
Edit: I kinda of forgot to mention that part, I don't want them to be hidden, I want each div to automatically allow for the "previous" one to finish it's concent without overlapping (Tried with overflow: Auto but it gave them scrollbars, to all the forms in the whole site.
Here's a pic of how it looks at the moment, I'm sure you will see the problem right away
http://imgur.com/aj8pDaO
Here's the relevant HTML
<html>
<head>
<link href="hue.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="column">
<div class="form">
<div class="form-nivel">
<label for="cfdiCreate:organizationRfc">RFC</label><label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
<div class="form-nivel">
<label for="cfdiCreate:organizationTaxSystem">Regimen fiscal</label><label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
</div>
<div class="form-nivel">
<label for="cfdiCreate:organizationTaxAddress">Domicilio fiscal</label><label id="cfdiCreate:organizationTaxAddress">XXXXXX Colonia Tecnológico Monterrey,Nuevo León,México.C.P.XXXXXX</label>
</div>
<div class="form-nivel">
<label for="cfdiCreate:organizationExpeditionPlace">Lugar de expedición</label><label id="cfdiCreate:organizationExpeditionPlace">Suc.1 Chiapas,México. </label>
</div>
</div>
</div>
<div class="column secondary">
<!--?xml version="1.0" encoding="UTF-8"?-->
</div>
</body>
</html>
And here's the CSS
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
}
p {
text-align: left;
}
.content {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
float: left;
background: #;
text-align: left;
}
.content label, .content p {
font-size: 16px;
color: #024DA1;
padding-left: 2%;
}
.column {
display: block;
float: left;
width: 48%;
margin-top: 15px;
height: auto;
background:;
}
.secondary {
margin-left: 10px;
}
.clearfix {
clear: both;
margin-bottom: 10px;
}
.form {
display: block;
width: 96%;
height: auto;
background:;
}
.form-nivel {
display: block;
width: 100%;
width: 470px;
min-height: 20px;
margin-bottom: 20px;
position: relative;
}
.form-nivel label {
width: 160px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
Here. You are applying a CSS rule to all the labels. The overlapping happens because of this rule.
float: left;
To fix this, remove the .form-nivel label rule and add these.
.form-nivel label:nth-child(1) {
width: 160px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
.form-nivel label:nth-child(2) {
width: 160px;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
you can use overflow:hidden to hide the content if it overflows into the next one
The CSS logic for the left labels and the right labels are the same.
First thing you should do is set them apart.
<div class="form-nivel">
<label class="leftLabel" for="cfdiCreate:organizationRfc">RFC</label>
<label class="rightLabel" id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
Notice the added class
Then on your css you would do something like this:
.form-nivel label.leftLabel {
width: 160px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: right;
}
.form-nivel label.rightLabel {
width: 400px;
float: left;
height: 20px;
line-height: 20px;
margin-right: 10px;
text-align: left;
}
I made the right labels bigger and aligned them to the left.
Also, you should add:
<meta charset="utf-8">
on the html head. This is to be able to display characters with accents.
Why not simply keep your <label/>s inline? Removing all the unneccessary declarations...
.form-nivel label {
margin-right: 10px;
line-height: 20px;
}
Try adding:
<div class="clearfix"></div>
between each row.
<div class="form-nivel">
<label for="cfdiCreate:organizationRfc">RFC</label>
<label id="cfdiCreate:organizationRfc">XXXXXXXXXXXX</label>
</div>
<div class="clearfix"></div>
<div class="form-nivel">
<label for="cfdiCreate:organizationTaxSystem">Regimen fiscal</label>
<label id="cfdiCreate:organizationTaxSystem">Sueldos y salarios</label>
</div>
I have the following HTML:
<div id="root">
<div id="left_side">LEFT</div>
<div id="center_s">CENTER</div>
<div id="right_side">RIGHT</div>
</div>
...and CSS:
#root {
background-color: #eee;
}
#left_side {
float: left;
}
#center_s {
margin-left: auto;
margin-right: auto;
width: 65px;
background-color: #ccc;
}
#right_side {
float: right;
}
However, I get the following:
The DIV on the right is on a separate line, which is not what I want. How can I make it stay on the same line as the other DIVs?
Note: you can see a live demo and play around with the code here: http://jsfiddle.net/UDb4D/
It's because your #center_s div expands to the width of the remaining line. If you put #right_side above #center_s in the HTML order, it'll work fine.
See here:
http://jsfiddle.net/UDb4D/2/
Because the center has no float and right-floated elements need to appear first. Add float: left; to your #center_s or move the #right_side div before so it looks like this:
#root {
background-color: #eee;
}
#left_side {
float: left;
}
#center_s {
margin-left: auto;
margin-right: auto;
width: 65px;
background-color: #ccc;
float: left;
}
#right_side {
float: right;
}
<div id="root">
<div id="right_side">RIGHT</div>
<div id="left_side">LEFT</div>
<div id="center_s">CENTER</div>
</div>
I quickly hacked this up. Bare in mind that I'm a developer, not a web designer.
<div id="root" align="center">
<div id="right_side">RIGHT</div>
<div id="center_s">CENTER</div>
<div id="left_side">LEFT</div>
</div>
And...
#root {
background-color: #eee;
}
#left_side {
display: inline;
float: left;
}
#center_s {
display: inline;
margin-left: auto;
margin-right: auto;
width: 65px;
background-color: #ccc;
}
#right_side {
display: inline;
float: right;
}