[roligtskyltat]

Som rubriken lyder. Behöver hjälp snabbt så hoppas någon person kan svara på denna fråga.. Hur gör jag min sidebar bredare? (Till 300px)

CSS:
#sidebar {
float:left;
width:30%;
padding:5px 0 0;
}

body,input,textarea {
color:##0D0D0D;
font-size:14px;
font-family:Arial;
text-decoration:none;
}

h1,h2,h3,h4,h5,h6 {
clear:all;
margin:10px;
}

p {
line-height:20px;
}

[tartareandesire]

Du har en relativ bredd nu (width:30%). Vill du ha en absolut bredd skriver du bara 300px men beroende på hur resten av din layout ser ut så kan du behöva ändra lite annat också om det ska fungera / se bra ut för alla besökare.

[roligtskyltat]

Ursprungligen postat av tartareandesire

Du har en relativ bredd nu (width:30%). Vill du ha en absolut bredd skriver du bara 300px men beroende på hur resten av din layout ser ut så kan du behöva ändra lite annat också om det ska fungera / se bra ut för alla besökare.

Tjena..
Funkade tyvärr inte, hela sidebaren bara försvann när jag ändra width från 30% till 300px.

Så här ser hela layouten ut:

@import url(http://fonts.googleapis.com/css?family=Crafty+Girls);

html, body {
margin: 0px;
padding: 0px;
background:#3F73A3 url(http://images.staticjw.com/hun/1726/bg.jpg) repeat-x fixed;
}

#wapper {
width:900px;
margin:0 auto;
}

#main .no-access,#primary,#site-generator {
display:block;
width:500px;
margin:0 auto;
}

#primary {
clear:both;
overflow:hidden;
width:900px;
}

#content {
float:right;
overflow:hidden;
width:70%;
padding: 25px 0 0 0;
}

#sidebar {
float:left;
width:30%;
padding:5px 0 0;
}

body,input,textarea {
color:##0D0D0D;
font-size:14px;
font-family:Arial;
text-decoration:none;
}

h1,h2,h3,h4,h5,h6 {
clear:all;
margin:10px;
}

p {
line-height:20px;
}

ul {
list-style:circle outside none;
}

ol {
list-style-type:decimal;
}

strong {
font-weight:medium;
}

blockquote {
font-style:Arial,Verdana,Helvetica,Geneva,sans-serif;
margin:1em;
}

input[type=text],input[type=email],textarea {
border:1.5px solid #1383838;
}

textarea {
padding-left:3px;
width:100%;
}

input[type=text],input[type=email] {
display:block;
width:55%;
padding:1.5px;
}

input[type=submit] {
background:none repeat scroll 0 0 #383838;
border:medium none;
border-radius:2px 2px 3px 3px;
color:#FFF;
cursorointer;
text-decoration:none;
font-size:16px;
margin:5px;
padding:3px 10px;
}

input[type=submit]:hover,input[type=submit]:focus,input[type=submit]:active {
background:none repeat scroll 0 0 #383838;
}

a {
color:#171717;
}

a:visited {
color:#242424;
}

a:focus,a:active,a:hover {
color:#3f73a3;
}

#site-title {
color:#ffb700;
font-size:30px;
min-width:100%;
text-decoration:none;
text-shadow:0 1px 2px rgba(0,0,0,0.5);
z-index:1000;
border-bottom:solid 10px #F7732E;
padding:10px 0 0;
}

#site-title a {
color:#ffb700;
font-size:30px;
min-width:100%;
padding-left:30px;
text-decoration:none;
text-shadow:0 1px 2px rgba(0,0,0,0.5);
z-index:1000;
}

img#wpstats,.screen-reader-text,.section-heading {
clip:rect(0px,1px,1px,1px);
position:absolute!important;
}

.access {
font-family:'Crafty Girls';
margin-top:-68px;
float:right;
margin-right:25px;
letter-spacing:1px;
font-weight:500;
}

.access ul {
font-size:17.5px;
list-style:none outside none;
padding-left:0;
display:table;
margin:0 auto;
}

.access li {
float:left;
position:normal;
margin-top:13px;
}

.access a {
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #F7732E 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #F7732E 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #F7732E 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #F7732E));
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #F7732E 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #F7732E 100%);
border-radius:13px 13px 0 0;
display:block;
line-height:1.9em;
text-decoration:none;
margin:0 3px 3px 0;
padding:2px 9.5px;
}

.access li#active a {
background:none repeat scroll 0 0 #fafafa;
color:#1682ad;
border-radius:13px 13px 0 0;
}

.access li:hover > a,#main .access ul ul :hover > a {
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F7732E 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F7732E 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F7732E 100%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #FFFFFF), color-stop(1, #F7732E));
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F7732E 100%);
background-image: linear-gradient(to top, #FFFFFF 0%, #F7732E 100%);
border-radius:13px 13px 0 0;
}

.hentry,.error404 .post {
background:none repeat scroll 0 0 #F1F6F9;
border-radius:3px 3px 3px 3px;
border:solid 1px #F7732E;
display:block;
overflow:hidden;
-webkit-box-shadow:5px 5px 15px 2px #F7732E;
box-shadow:5px 5px 15px 2px #F7732E;
margin: 0px 19px 19px;
padding: 19.5px;
}
.entry-header {
display:block;
position:relative;
padding:0em 0 0;
}
.entry-title {
font-family:'Crafty Girls';
letter-spacing:2px;
font-weight:500;
color:#F7732E;
font-size:40px;
min-width:100%;
text-decoration:none;
text-shadow:0 1px 2px rgba(0,0,0,0.5);
padding:0em 0 0;
}

.entry-title,.page .entry-title {
border-bottom:1px dashed #CCC;
font-size:29px;
margin-bottom:0;
line-height:39px;
padding-bottom:13px;
}

.entry-content {
font-size:13px;
padding: 0px;
}

.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4 {
font-weight:700;
margin-bottom:.25em;
}

.entry-content h2 {
font-size:1.5em;
margin-top:10px;
}

.entry-content h3 {
font-size:1.2em;
margin-top:10px;
}

#sidebar h4 {
border-radius:3px 3px 0 0;
color:#EED;
font:bold 15px/23px "Fertigo Pro",fertigo-pro-1,fertigo-pro-2,Georgia,"Bitstream Charter",serif;
width:100%;
margin:23px -10px 4px;
padding:2px 10px;
}

.widget {
border-radius:3px 3px 0 0;
color:#6BD;
display:block;
font:12px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin:0 10px 10px;
padding:0 10px 10px;
}

.widget ul {
margin-left:1.5em;
}

#sidebar a {
color:#FFE;
text-decoration:none;
font-size:13px;
}

#sidebar a:hover,#sidebar a:focus,#sidebar a:active {
color:#DDC;
font-size:13px;
}

#sidebar p {
color:#FFE;
font-size:13px;
}

#colophon {
background: url(http://images.staticjw.com/rol/3041/footer-img-3.png) no-repeat;
color:#000;
margin:0 auto;
width: 900px;
height: 358px;
}

#site-generator {
color:#000;
padding: 130px 20px 20px 260px;
}

#site-generator a {
color:#000;
text-decoration:none;
}

fieldset {
border:1px solid #EAEAEA;
border-radius:4px 4px 4px 4px;
color:#787878;
width:480px;
margin:8px auto 0;
padding:21px 33px 12px;
}

.clear {
clear:both;
}

#blog-posts .blog-post h1 {
margin-bottom:-1px;
padding-bottom:0;
font-size:h1;
line-height:25px;
}
#blog-posts .blog-post {
border-bottom:1px solid #888;
margin-bottom:1px;
padding-bottom:-0px;
}
#blog-posts .blog-date {
color:#888;
margin-bottom:10px;
margin-top:0;
padding-top:0;
padding-bottom:0;
font-family:Arial,Verdana,Helvetica,Geneva,sans-serif;
}
#blog-posts .blog-date {
margin-left: 15.18px;
}
#blog-posts .blog-post a { margin-top: -18px; }
#blog-posts .blog-post img { margin-bottom: -8px; }
#site-description,#blog-posts img#rss-img,#blog-posts .blog-rss {
display:none;
}
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:110px;
display:block;
text-indent:-9999px;
background: url('http://images.staticjw.com/rol/2394/icon-gototop-1.png') no-repeat;
}

.entry-content li,#sidebar li {
margin-bottom:6px;
}

Skulle du kunna hjälpa mig? =)

[ANttila]

antingen räknar du ut hur många procent som motsvarar 300px, eller så sätter du det till 300px. Sen hur du floatar och positionerar, det är en annan femma.

[ANttila]

Jag kollade på din site, där har du sidebar 30% och content 70%.
De ligger i en 900px bred div.
Det betyder att 33.3333..% = 300px.
Då måste du minska content lika mycket som du ökar sidebar, annars kommer de ligga ovan/nedanför varandra istället för bredvid.

[roligtskyltat]

Ursprungligen postat av ANttila

Jag kollade på din site, där har du sidebar 30% och content 70%.
De ligger i en 900px bred div.
Det betyder att 33.3333..% = 300px.
Då måste du minska content lika mycket som du ökar sidebar, annars kommer de ligga ovan/nedanför varandra istället för bredvid.

Så vad ska det vara för siffra på content?

[ANttila]

Ursprungligen postat av roligtskyltat

Så vad ska det vara för siffra på content?

Gör en liten spydig kommentar och ber dig läsa meddelandet igen :P

[roligtskyltat]

Ursprungligen postat av ANttila

Gör en liten spydig kommentar och ber dig läsa meddelandet igen :P

Funkade. Tack så mycket!