http://rusticblonde.hostizzo.com/
Hi there,
please can someone help. Ive done this on a "float" style with % margins etc.... but when for example i resize the browser the sidebars go all messy...
This is my CSS markup
#MainContent {
width: 53%;
float: left;
margin-left: 110px;
margin-top: -247px;
padding-top: 0px;
background-color: #ffffff;
font-family: verdana;
padding-left: 10px;
padding-right: 10px;
font-weight: 100;
font-size: 8pt;
color: #000000;
}
#rightsidebar {
background-color: #ffffff;
width: 26%;
float: left;
margin-left: 15px;
margin-top: -247px;
}
#FooterWrapper {
width: 81.2%;
clear:both;
height: 20px;
background-color: #145618;
color: #ffffff;
margin-top: 0px;
margin-left: 110px;
padding-bottom: 10px;
}
#chunkyfooter {
clear: both;
overflow: hidden;
width: 81.2%;
padding-top: 8px;
margin-left: 110px;
text-align: center;
font-family: verdana;
font-size: 10px;
}
Any ideas how to fix this?
thanks :)
Kirsty
Try not to mix two units in the same element, maybe this is the cause of your problems.
Some people like to mix the two kinds of units, pixel and percentage, but I always try to always use pixels.
My suggestion, choose the one you are most comfortable with and stick with it and as long as you don't mix different units in the same element you should be fine.
Related
I would like to have my Header Elements stack on top of each other to the right hand side of the screen (H1 element with the H2 element right under it). I am just starting to get a hang of CSS so do bear with me. Tried searching online for solutions but was only able to find an answer for when there was a single element.
Anyways this is what the page is looking like right now on screen:
The blue "We Help People and Businesses" is an H1 Element. The white "Achieve today's Goals and tomorrow's Aspirations" is an H2 Element. Both of these Header elements are nested within a DIV
Currently the CSS code is looking like this:
.hero01_content-div {
margin-top: 400px;
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
How can I make the H2 element stack right under my H1 element with both of these elements on the right hand side? I would appreciate any help. Thank you in advance.
A codepen demonstrating the above can be found here: http://codepen.io/anon/pen/qOoVxb
You need to set float: right to the parent container and remove the floating properties from the heading element as it takes it out of the normal flow.
Codepen Demo
.hero01_content-div {
margin-top: 400px;
float: right; /* Added */
}
.hero01_content-head-test-main {
position: relative;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
position: relative;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
float: right;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
<div class="w-section hero-01">
<div class="hero01_overlay">
<div class="w-container hero01_content">
<div class="w-clearfix hero01_content-div hero01_test" data-ix="scroll-reveal">
<h1 class="hero01_content-head-test-main">We Help People and Businesses</h1>
<h2 class="hero01_content-subhead-test-main">Achieve today's Goals and tomorrow's Aspirations</h2>
</div>
</div>
</div>
</div>
OK you need to remove
.hero01_content-div {
margin-top: 400px;
float: right;
}
Then change these
.hero01_content-head-test-main {
postion: absolute;
top: 0px;
width: 600px;
margin-top: 0px;
margin-bottom: 0px;
padding: 5px 15px;
float: right;
background-color: #0080c7;
font-family: Lato, sans-serif;
color: white;
text-align: right;
}
.hero01_content-subhead-test-main {
float: right;
width: 500px;
margin-top: 0px;
margin-bottom: 0px;
padding: 10px 15px;
background-color: white;
font-family: Lato, sans-serif;
color: #ec008c;
text-align: right;
}
I am having trouble getting the top of the border to show up of a div that is behind another div. It is currently cut off, but I'd like to get it to show behind the skills tag. Is this possible? Thank you!!
#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 38px;
background-color: #ffe8eb;
float: left;
}
#box {
width: 84%;
max-width: 500px;
height: 200px;
margin-top: 40px;
position: absolute;
border: 1px solid black;
float: left;
z-index: -1;
}
I'd like to get it to show behind the skills tag. Is this possible?
The z-index property specifies the order of an element as they appear in the DOM (with the lowest element down at the same hierarchy level always appearing on top). When elements overlap, the z-index value determines which one covers the other. z-index only effects elements that have a position value other than the default value. To create the affect you're wanting, you need to add a lesser z-index value to #skills, like this:
#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 38px;
background-color: #ffe8eb;
float: left;
z-index: -2;
}
Or change the z-index value of #box from -1 to 1. Here's a fiddle example for you to review. http://jsfiddle.net/yongchuc/dconymaf/
your #skills element does not have the z-index property set, meaning it will default to auto, which will check the parent element's z-index to calculate it, My advice would be to set both elements index to be sure:
#skills{
width: 75px;
height: 40px;
font-weight: 300;
text-align: center;
font-size: 1em;
position: relative;
margin-top: 20px;
margin-left: 20px;
font-family: 'Source Sans Pro', sans-serif;
line-height: 38px;
background-color: #ffe8eb;
float: left;
z-index: 0;
}
#box {
width: 84%;
max-width: 500px;
height: 200px;
margin-top: 40px;
position: absolute;
border: 1px solid black;
float: left;
z-index: -1;
}
I'm starting with HTML and CSS and i have written my first page for my friend. Problem is that my code seems to be pretty bad, cause when i try to change few things, whole page almost crashes.
map of my page:
http://i.stack.imgur.com/0U1lO.png
So here's the thing:
Logo + navigation menu
here's code:
#logo {
margin-left: 15%; }
nav {
float: left;
margin-left: 10%;
margin-top: 1%;
font-weight: bold;
vertical-align: central; }
a {
text-decoration: none; }
nav ul {
list-style-type: none; }
nav li {
float: left;
margin-right: 10px;
}
Slider is only thing made well i think, cause i made it margin-left and right on: auto;
Here starts the fun:
code of news:
.newsy {
font-weight: 900;
font-size: xx-large;
margin-left: 15%;
color: black; }
.image-box {
position: relative;
margin-left: 15%;
width: 640px;
height: 300px; }
.image-box span {
position: absolute;
bottom: 0;
left: 0;
background: rgba(0,0,0, .5);
color: white;
padding: 15px;
}
.community-box {
margin-right: 15% ;
float: right;
}
.baner-box {
float: right;
width: 270px;
height: 500px;
margin-right: 15%; }
.baner-box baner {
margin: 40px;
}
.autor {
border: solid 0px white;
background-color: white;
margin-left: 15%;
padding: 10px;
padding-left: 20px;
width: 610px;
background-color: white;
position: relative;
font-weight: bolder;
font-size: 13px;
font-kerning: normal; }
.readmore {
position:absolute;
bottom: 0;
right: 0;
width: 90px;
padding: 10px;
padding-left: 20px;
background-color: rgba(0,0,0, .9);
color: white;
}
When i try to move them from center to a bit of left whole page is crashing.
Also my community boxes (facebook, YT and twitter) aren't too properly set.
Can anybody help me and say what mistakes I have made ? It's really important.
Greets.
P.S. tell me if you need whole code i can upload package of it.
this may be happen because the width and height's pixel is may be greater than your display's pixel so i suggest you to give it in %
like
.baner-box {
float: right;
width: 40%;
height: 50%;
margin-right: 15%; }
may be work for you
I have a problem with the Firefox browser. You can see it here. Unminified version of css (using LESS): here.
All browsers display it very well, but Firefox moved the form in the pink lane to the top of the page. Do you know what the problem might be?
Thank you!
Adding
clear:both
on #formPruh will solve this please check if its work fine in all browser
after applying Clear:both on #formPruh
please change margin-top:250px to 55px; in #kategories
See this quick firebug solution shot
try this in your css
#formPruh {
width: 100%;
height: 120px;
form label {
font-weight: bold;
color: white;
}
form table {
position: relative;
margin-left: 60px;
top: 210px; /* changed----------- top: 15px;*/
tr {
height: 40px;
border: 1px solid red;
td.popis {
text-align: right;
padding-left:5px; /* changed----------- padding-left: 30px;*/
}
td.input input, td.input select {
width: 150px;
height: 25px;
padding: 0;
margin: 0;
border: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: Verdana, Arial, sans-serif;
font-size: 105%;
}
}
}
}
You have to clear your floated DIV (logo, actions, user). Write like this:
#formPruh {
clear: both;
height: 120px;
width: 100%;
}
This question is unlikely to help any future visitors; it is only relevant to a small geographic area, a specific moment in time, or an extraordinarily narrow situation that is not generally applicable to the worldwide audience of the internet. For help making this question more broadly applicable, visit the help center.
Closed 10 years ago.
So here's my problem. I am using a liquid layout on my page, so that the site always fits the width of the window. works perfectly, sounds great, right? the problem that i'm having is that whenever the window is resized, the divs start moving, overlapping, and wrapping to the next line.
here's my site, so you can see what i am talking about: http://www.kaiserroof.com/test/index2.html
i'm somewhat new to css design. i'm sure there is an easy fix, but i can't figure it out. can someone help me? (soon, please. i'm so ready to be done with this website :) ) Here is my CSS code:
html {
padding: 0px;
margin: 0px;
width: 100%;
position: static;
border-collapse: collapse;
overflow-x: hidden;
}
body {
padding: 0px;
margin: 0px;
width: 100%;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #555;
font-weight: 100;
line-height: 18px;
}
#container {
padding: 0px;
margin: 0px;
width: 100%;
min-width: 600px;
background: #eeeeee;
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #555;
font-weight: 100;
line-height: 18px;
}
#row1 {
width: 100%;
float: left;
background: #eeeeee;
}
#row2 {
width: 100%;
float: left;
}
#row3 {
width: 100%;
float: left;
padding-top: 300px;
}
#row4 {
width: 100%;
float: left;
}
#row5 {
width: 100%;
float: left;
}
#logo {
float: left;
width: 13.5%;
}
#phone1 {
width: 85%;
float: left;
text-align: right;
}
#phone2 {
width: 79%;
padding-right: 6%;
float: left;
height: 54px;
text-align: right;
vertical-align: top;
}
#buttonmenu {
width: 86.5%;
float: left;
border: none;
margin: 0px;
padding: 0px;
border-collapse: collapse;
border-spacing: 0;
}
#backgroundleft {
float: left;
position: absolute;
z-index: 1;
}
#intro {
float: left;
position: absolute;
z-index: 2;
padding-left: 15.5%;
}
#form {
width: 34.5%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #000;
border-top-style: none;
border-left-style: none;
padding-bottom: 76px;
}
#estimates {
padding-left: 20px;
padding-top: 10px;
padding-bottom: 20px;
}
#form1 {
padding-left: 20px;
}
#welcome {
width: 34.75%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #000;
border-top-style: none;
border-left-style: none;
border-right-style: none;
text-align: center;
padding-top: 10px;
}
#linksright {
width: 30.5%;
float: left;
border-style: solid;
border-width: 1px;
border-color: #000;
border-top-style: none;
border-right-style: none;
text-align: right;
padding-top: 10px;
padding-bottom: 92px;
}
#bottomleft {
width: 23%;
float: left;
padding-left: 50px;
padding-top: 10px;
}
#bottommiddle {
width: 50%;
float: left;
padding-top: 10px;
text-align: center;
}
#bottomright {
width: 20%;
float: left;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: #BBBBBB;
}
a {
text-decoration: none;
color:#000;
line-height: 20px;
}
A:hover {
text-decoration: underline;
color: #000
}
.alternate {
padding-right: 20px;
}
.object {
outline: none;
}
#object {
outline: none;
margin: 0;
display: block;
}
Some things just can't be wrapped onto a new line, such as form elements. You can hide the problem by setting a min-width on each of those columns (#form, #welcome, #linksright), so they won't shrink down past a certain point. Or a larger single min-width on #container, since 600px obviously isn't enough to keep stuff from overlapping.
Without the corresponding HTML it is hard to tell. But let me do a guess. As you align many elements using "float" and "width: 100%" they are not in the text-flow anymore. Therefore they might not resize with the rest of the page. On some elements it might be useful to make the use "display: inline-block" instead of "float".
Really I would suggest that you just use a 3 column fixed width layout. Stretching those divs is not going to look good and will make things render weird. Try wrapping the whole site in a wrapper div and then centering it. That way you wont have to deal with the craziness of stretching divs.
div#wrapper{
margin: 0 auto; // this will make everything center automatically.
width: 960px;
}
Sorry to not answer your question but to suggest a different solution. I am just not a fan of liquid layouts.
You make the two outer columns a static width and make the center a percentage. You can also use a percentages for the left, right margins as well.