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>
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 try to use stack as a last resort to figuring out my coding problems but I can't find what is wrong with this stupid website. I am building the mobile site for a company right now and I am doing it through 2 separate style sheets so that when a user is on a device smaller than a specified resolution, it uses a different style sheet. I've done all of this no problem.
My problem is that some of the css styling in my external doc is not being applied to the respective elements in the HTML doc. More specifically, none of the ".fb a", ".tw a", and ".in a" are not being applied at all. When I apply them inline in the html document it works but I need it to be in the external style sheet. And I cannot figure out why this is happening. Since the background-image is not being applied, nothing shows up. What is weirder is that other elements of the footer display properly and when I change the styling, it is reflected on the site. Please help!!!
My HTML:
<!-- FOOTER -->
<div class="footwrap">
<div class="footer">
<!-- CONTACT -->
<div class="text">
<!-- LEGALITY -->
<div class="comm">Oblique Drive technology is patents pending. Copyright © 2014. All Rights Reserved. Oblique Drive is a trademark of Callplex, Inc.</div>
</div>
<!-- SOCIAL NETWORKING -->
<div class="sn">
<a href="http://www.facebook.com/obliquedrive">
<div class="fb">
</div>
</a>
<a href="http://www.twitter.com/obliquedrive">
<div class="tw">
</div>
</a>
<a href="http://www.linkedin.com">
<div class="in">
</div>
</a>
</div>
</div>
</div>
And my CSS:
/*Footer*/
.footwrap {
width: 100%;
height: 175px;
background-color: #444;
}
.footer {
width: 90%;
margin: auto;
height: 175px;
background-color: #444;
position: relative;
bottom: 0px;
}
.comm {
width: 420px;
margin: auto;
height: 175px;
font-size: 24px;
margin-top: 20px;
text-align: left;
float: left;
}
.sn {
width: 400px;
float: right;
margin-top: 30px;
margin-right: 50px;
display: block;
}
.fb {
width: 75px;
height: 75px;
display: inline-block;
}
.fb a {
display: block;
width: 100px;
height: 100px;
background-image: url(images/sniconsm.jpg) !important;
background-position: 0px 0px !important;
}
.tw {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.tw a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 150px 0px;
}
.in {
width: 75px;
height: 75px;
display: inline-block;
padding-left: 30px;
}
.in a {
display: block;
width: 75px;
height: 75px;
background-image: url(images/sniconsm.jpg);
background-position: 75px 0px;
}
.footer .text {
position: relative;
display: inline-block;
margin-left: 50px;
margin-top: 15px;
float: left;
line-height: 170%;
color: #ffffff;
}
Also, here is the page live, with all of the code if it helps:
http://thewolv.es/Oblique%20Drive/mobile
Please just ignore any other problems you see lol
Look a little more closely at your styles. You have .fb a, but the HTML markup is the other way around:
<a href="http://www.facebook.com/obliquedrive">
<div class="fb"></div>
</a>
If you were trying to target the div, you should use a .fb. But really, you might not need those divs at all. Just change your A tag to something like:
Then use the CSS selector that is a.fb (no space between them).
Your A elements are not children of the divs, it's the other way around.. yet your CSS defines the A elements as children.
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!
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>
There is div container and 2 divs inside. It should be image(first div) and text near it with chosen distance between them.
alt text http://img24.imageshack.us/img24/1160/2delcontact.png
The code below works fine in Firefox/Chrome/Safari, but it works incorrect in IE7/Opera.
alt text http://img710.imageshack.us/img710/5675/2delcontactie7opera.png
xhtml:
<div id="mainContact">
<div id="contactIcon">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
</div>
<div id="contactField">
<span id="topMailAddress">07897 255 664</span>
</div>
</div>
css:
html, body{ font-family: Tahoma; }
img{ border: 0px; }
#mainContact{
width: 135px;
float: right;
overflow: hidden;
font-family: Trebuchet MS;
}
#contactIcon{
width: 19px;
margin-right: 7px;
float: left;
text-align: right;
}
#phoneImg{
position: relative;
bottom: 14px;
}
#contactField{
float: right;
width: 109px;
text-align: right;
font-size: 1.12em;
color: #454545;
}
#topMailAddress{
position: relative;
width: 109px;
top: 13px;
}
here is this example on server: link text
What can be the reason of this problem?
Try this
HTML
<div id="mainContact">
<img id="phoneImg" alt="phone" src="img/cellPhone.png" />
<span id="topMailAddress">07897 255 664</span>
</div>
<br class="clear" />
CSS
#mainContact {
width: 200px; // Width of whole element - adjust to always fit number
}
#mainContact #phoneImg,
#mainContact #topMailAddress {
display: block;
float: left;
}
#mainContact #phoneImg {
margin-right: 10px; // Adjust gap between image and text
}
br.clear {
clear: both;
height: 1px;
overflow:hidden;
font-size: 1px; // For IE and the like
}
Have fun ;)