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
Related
how to change the position of "h" which in "hello" and change its width using css and without modifying the div element,
I have tried the pseudo element first-letter, but it didn't work for me
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div>hello, this my code.</div>
The first-letter is working fine. There is also another method to place the first in the span tag and styling it.
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
position: relative;
text-align: center;
}
div span {
background-color: red;
color: white;
position: absolute;
left: 20px;
}
<div><span>h</span>ello, this my code.</div>
Use float for this task:
body {
margin: 0;
}
div {
background-color: gainsboro;
width: 290px;
margin-top: 2%;
margin-bottom: 2%;
margin-right: auto;
margin-left: auto;
padding: 20px;
text-align: center;
}
div::first-letter {
background-color: red;
color: white;
float: left;
margin-left: 20px;
margin-right: -20px;
}
<div>hello, this my code.</div>
Hey unfortunately CSS cant select first letter by itself. You can use another div for example;
<h1><span>H</span>ello</h1>
h1 { font-size: 1.3rem;}
h1 span {font-size:1.5rem;}
of course you can address direct name or you can access to that span element in different ways. But dont forget span by itself doesn't change the document placing etc that's why we prefer using this element for actions like that.
I can get the sidebar to display properly on some pages but not all. I can't figure out where I've gone wrong.
I've messed around with clearing the floats but I don't fully understand how this works and how to apply it. So the index page displays properly but the about page has the sidebar positioned under the main page content and the space where the sidebar should display is empty.
article::after, #home-two-parts::after {
content:''; display: block; clear: both;
}
#home-main-left {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
/* === HOMEPAGE - Left Top === */
#intro {
margin-bottom: 30px;
}
figure {
margin: 0;
padding: 0;
}
figure img{
display: inline-block;
width: 60%; height: auto;
padding-right: 20px;
}
figcaption {
display: inline-block;
width: 30%;
vertical-align: top;
}
/* === HOMEPAGE - Left Bottom === */
#home-two-parts {
margin-bottom: 50px;
}
#home-two-parts p {
height: 80px;
}
#home-two-parts img {
width: 80%;
height: auto;
}
#about-button, #tutorial-button {
float: left;
width: 45%;
}
#about-button {
margin-right: 30px;
}
/* === ABOUT page ===*/
article::after, #about-extra-two::after {
clear: both;
}
#About {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
#about-textWrap img {
float: left;
margin: 0 1em 1em 0;
display: inline-block;
width: 40%; height: auto;
padding-right: 20px;
}
#about-videos {
padding-bottom: 20px;
}
.video {
display: inline-block;
width: 100%;
height: auto;
text-align: center;
}
.video-caption {
text-align: left;
float: right;
display: inline-block;
margin-bottom: 20px;
}
#links {
width: 100%;
padding: 0 10px 0 10px;
}
#more, #directory {
float: left;
width: 30%;
height: 250px;
margin-left: 45px;
padding: 15px;
background-color: #f0c1e6;
overflow: auto;
}
#extra-two {
margin-bottom: 50px;
}
#extra-two h3 {
text-align: center;
color: #ffffff;
background: #191970;
}
#extra-two p {
height: 80px;
width: 70%;
}
#extra-two li {
padding-bottom: 10px;
}
#links {
float: left;
width: 70%;
padding: 0 10px 0 10px;
}
#links ul {
width: 100%;
text-align: left;
margin: 20px;
padding-bottom: 20px;
}
#links li {
list-style: circle;
}
Guys thanks for your reply, I fixed it!
I looked through the guide to posting a "Minimal Reproducible Example" and decided to go back to square one and check for syntax errors, comparing the pages that work with the pages that didn't.
On each problem page, there was an element positioned incorrectly outside of the main content section that was blocking my sidebar from floating.
Even though you guys didn't "fix" my problem, you made me stop and think, go back to basics and work it out for myself, which is far more valuable because I feel like I really learned something. Thank you! ^_^
I've been struggling with getting my hamburger menu to slowly open. It took me a long time to even create it. :) Can anyone tell me if this CSS code allows for having it gradually open?
http://codepen.io/kiddigit/pen/EKRgQz
#media only screen and (max-width: 700px) {
body {
background-color: #white;
}
img {max-width: 100%; padding-bottom: 10px;
}
h1 {
font-size: 30px;
}
.wrapper {
border: 0px;
padding: 1px;
background-color: white;
}
.content {
background-color: white;
border: none;
margin-left: 100px;
margin-right: 100px;
}
.menu-btn div{
float: left;
padding-right: 0px;
margin-top: 0em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 25px;
height: 4px;
margin-bottom: 5px;
background: rgb(0,0,0);
z-index: 99;
}
.menu-btn span:last-of-type {
margin-bottom: 0;
}
.responsive-menu{
display: none;
overflow: hidden;
}
.responsive-menu ul {
width: 80px;
float: left;
margin-right: 0;
margin: 0;
}
.main-nav {
border: none;
}
a {
font-size: 10px;
color: white;
}
.responsive-menu li {
padding-left: 5px;
font-size: 10px;
line-height: 25px;
list-style-type: none;
background-color: black;
}
.expand {
display: block !important;
}
$( '.menu-btn' ).click(function(){
$('.responsive-menu').slideToggle('slow');
});
UPD: Smooth appearing of element when it changes display from none to block can't be achieved with CSS. JQuery has some functions for that, toggle() and slideToggle(). slideToggle looks better for dropdown as it changes height of element from 0 to its natural height. In brackets you can add animation speed, slow is equal to 600 milliseconds, time in milliseconds also can be used: $('.responsive-menu').slideToggle(500)
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.
I am working on a website located here:
http://www.freshhealthybistro.com/temp/
I used a 960 grid, and the css for the 960 was taken from the website:
(google 960 gs because I can only post one hyperlink)
I realize that maybe I should have just avoided using the 960, but anyway... I did use it and unfortunately my website isn't uniform across browsers. The gray table underneath the slideshow (the one on the right hand side) should be extending to be the length of the slideshow so that it isn't shorter and both tables line up to be the same length. Instead, it is shorter on every browser and if I attempt to change the properties from % to px then it is still not uniform. In the firefox browser, even the table that is encasing the slideshow is drastically different than every other browser and looks like the website is broken. Here is my CSS:
#charset "UTF-8";
/* CSS Document */
body {
margin:0;
padding:0;
background-image:url(../images/fgc_bg.png);
color: #FFFFFF;
font-family: arial,sans-serif;
}
h1 {
font-size: 24px;
color: #FFFFFF;
font-family: arial,sans-serif;
line-height: 50px;
}
#container {
position:absolute;
height: 100%;
left: 50%;
width: 1200px;
margin: 0;
margin-left: -600px;
}
#navigation {
position: float;
float: left;
background-image:url(../images/topbar.png);
width: 960px;
height: 50px;
margin-top: -825px;
margin-left: 120px;
}
#footer {
position: float;
float: left;
background-image:url(../images/topbar.png);
text-align: center;
width: 960px;
height: 50px;
margin-top: -25px;
margin-left: 120px;
}
#clearfooter {
position: float;
float: left;
width: 1200px;
height: 50px;
}
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display:inline;
z-index: 1;
float: left;
position: float;
margin-left: 1%;
margin-right: 1%;
}
.grid_1 {
width:6.333%;
}
.grid_2 {
width:14.667%;
}
.grid_3 {
margin-left: 120px;
margin-top: 30px;
width:23.0%;
}
.grid_4 {
width:31.333%;
}
.grid_5 {
width:39.667%;
}
.grid_6 {
width:48.0%;
}
.grid_7 {
margin-top: 30px;
width:50.666%;
}
.grid_8 {
width:64.667%;
}
.grid_9 {
width:73.0%;
}
.grid_10 {
margin-top: 50px;
margin-left: 120px;
width: 940px;
}
.grid_11 {
width:89.667%;
}
.grid_12 {
width:98.0%;
}
#logo {
position: float;
float: left;
background-image:url(../images/logo.png);
z-index: 100;
width: 266px;
height: 266px;
margin-top: -933px;
margin-left: 472px;
}
#content{
position: relative;
float: left;
background-image:url(../images/contentbg.png);
width: 1200px;
height: 800px;
margin: 150px 0 0 0;
z-index: -20;
}
#background {
position: relative;
float: left;
overflow: auto;
background-color:#bf6b31;
width: 100%;
height: 800px;
padding: 0;
margin: 150px 0 0 0;
z-index: -100;
}
#clearfix {
clear: both;
}
I am also having a weird problem with the slideshow. In IE6, the slideshows navigation (the 4 buttons in the bottom right hand corner) is functioning as it should. In every other browser these buttons are not functioning, and unclickable by the visitor. I don't know what the reason for this is, but I am assuming it may have something to do with the z-index. Here is the CSS file for the slideshow:
.featuredbox-wrapper{
display: none;
}
.featuredbox-wrapper,
.featuredbox{
top: 0px;
left: 0px;
width: 940px;
height: 400px;
margin-left:auto;
margin-right:auto;
position: relative;
overflow: hidden;
font-family: Verdana, Tahoma, "Lucida Sans";
font-size: 9pt;
font-weight: normal;
z-index: 10;
}
.featuredbox .description{
bottom: 55px;
left: 5px;
font-size: 16pt;
color: #FFF;
width: 500px;
height: 20px;
position: absolute;
font-style:none;
font-weight:normal;
}
.featuredbox-wrapper .navigation{
bottom:15px;
right:15px;
padding:0px;
position:absolute;
z-index: 100;
height: 20px;
width: 100px;
}
.featuredbox-wrapper .navigation ul{
list-style: none;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.featuredbox-wrapper .navigation li{
float: left;
height: 20px;
width: 20px;
margin: 0px 5px 0px 0px;
padding: 0px;
background-color: #FF0000;
cursor: pointer; cursor: hand;
background:transparent url(../images/inactive.png) no-repeat scroll 0 0;
}
.featuredbox-wrapper .navigation li.hover{
cursor: pointer; cursor: hand;
}
.featuredbox-wrapper .navigation li.active{
cursor: pointer; cursor: hand;
background:transparent url(../images/active.png) no-repeat scroll 0 0;
}
.featuredbox .box-slide1,
.featuredbox .box-slide2 {
position: absolute;
top: 0px;
left: 0px;
height: 300px;
width: 600px;
z-index: -1;
background: #FFF;
color: #000;
}
Thank you for the assistance. I am still learning CSS and appreciate the help with understanding where I went wrong. Uniformity between browsers is currently my major complaint area.
The main issue is that you chose to use a grid system, but then did not make your slider conform to the size it needed to be to fit the grid. The point of using a grid system is to have the uniform sizing/spacing it provides. So one answer to your dilemma is to downsize your slider images so they fit the grid.