CSS - programmering

det underlättar nog om du skriver vad du behöver hjälp med.. :)

Håller på med en hemsida och har utgått från en färdig mall som jag sen själv gör ändringar i.
Problemet är bara att i den här redan färdiga mallen så finns det en textkolumn på höger sida som jag vill minska på bredden eller om det kanske går ta bort helt och hållet.

Och det är det som jag behöver hjälp med för har försökt i två dagar nu =(

Här är all kod:

body {
margin: 0;
padding: 0;
background: #000000;
font-family: candara;
font-size: 15px;
color: #666;
}

h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #3E3530;
}

h1 {
font-size: 2em;
text-transform: uppercase;
font-family: candara;
font-weight: normal;
color: #606060;
padding: 12px 0px;

}

h2 {
font-size: 1.8em;
text-transform: uppercase;
font-family: candara;
font-weight: normal;
padding: 8px 0px;
}

h3 {
font-size: 1.4em;
text-transform: uppercase;
font-family: candara;
font-weight: normal;
padding: 5px 0px;
}

p, ul, ol {
margin-top: 10;
line-height: 180%;
}

ul, ol {
}

a {
text-decoration: none;
color: #339CCB;
}

a:hover {
text-decoration: underline;
color: #8A8A8A;
}

#wrapper {
margin: 0 auto;
padding: 0;
}

/* Header */

#header {
width: 940px;
margin: 0 auto;
}

#header img {
width: 940px;
margin: 0 auto;
padding: 0;
margin-left:12px;
}

#namn {
width: 940px;
height: 60px;
margin: 0px auto;
background: #000;
}
#namn h1 {
text-transform: uppercase;
font-family: candara;
font-size: 30px;
font-weight: normal;
color: #FFF;
padding: 0px 25px;
margin-top:10px;
}
#namn h2 {
text-transform: uppercase;
font-family: candara;
font-size: 18px;
font-weight: normal;
color: #FFF;
padding: 0px 25px;
}



/* Nav */

#nav {
width: 837px;
height: 50px;
margin: -3px auto;
padding: 0px 40px;
background: url(http://staticjw.com/n/templates/Flowermum/images/img01.jpg) no-repeat left top;
list-style:none;

}

#nav ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
}

#nav li {
float: left;
}

#nav a {
height: 35px;
display: block;
float: left;
margin: 0px 20px 0px 10px;
padding: 15px 25px 0px 10px;
text-decoration: none;
text-align: centre;
font-family: candara;
font-size: 13px;
font-weight: normal;
color: #FFFFFF;
border: none;
}

#nav a:hover {
text-decoration: underline;
}

#nav #active a {
font-weight: bold;
}

#nav .first a {
padding-left: 0px;
}


/* Page */

#page {
width: 917px;
margin: 0 auto;
padding: 0;
background: url(http://staticjw.com/n/templates/Flowermum/images/img04.jpg) repeat-y left top;
}

#page-bgbtm {
padding: 0px 50px 0px 50px;
}

/* Content */

#content {
float: left;
width: 530px;
padding: 0px 0px 0px 0px;
margin-bottom: 40px;
}

#content a, #sidebar a {

text-transform: uppercase;
font-size: 11px;
font-weight: bold;
}

/* Sidebar */

#sidebar {
float: right;
width: 280px;
margin: 0px;
color: #666;
}

#sidebar ul {
margin: 0;
padding-left: 15px;
list-style: square;
}

#sidebar li {
margin: 0;
padding: 0;
}

#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}

#sidebar li li {
background: url(http://staticjw.com/n/templates/Flowermum/images/img07.gif) no-repeat left 15px;
margin: 0px;
padding: 0px 0px 0px 20px;
line-height: 35px;
border-bottom: 1px dotted #E7E2DC;
}

#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: candara;
}

#sidebar li li a {
padding: 0px 0px 0px 0px;
}

#sidebar h4 {
height: 15px;
text-transform: uppercase;
font-family: candara;
font-size: 1.8em;
font-weight: normal;
color: #606060;
}

#sidebar p {
margin: 0 0px;
padding: 0px 0px 20px 0px;
text-align: justify;
}

#sidebar a {
border: none;
color: #339CCB;
}

/* Footer */

#footer {
height: 50px;
margin: 0 auto;
padding: 0px 0 15px 0;
font-family: Arial, Helvetica, sans-serif;
}

#footer p {
margin: 0;
padding-top: 20px;
line-height: normal;
font-size: 10px;
text-transform: uppercase;
text-align: center;
color: #A19D9A;
}

#footer a {
color: #A19D9A;
}


/* images */
#content img {
background: #fafafa;
border: 1px solid #dcdcdc;
padding: 10px;
}
img.float-right {
margin: 5px 0px 10px 10px;
}
img.float-left {
margin: 5px 10px 10px 0px;
}

fieldset#contact-form {margin:20px 0px 20px 10px;padding:10px;color:#000;width:380px;background:#fafafa;border:2px solid #dcdcdc;}
fieldset#contact-form label {font-size:13px;}
fieldset#contact-form input {height:20px;font-size:15px;margin-bottom:15px;padding:3px;}
fieldset#contact-form textarea {font-size:15px;margin-bottom:15px;width:360px;padding:3px;}
fieldset#contact-form #contact-button {font-size:14px;height:30px;margin-left:30px;}
input:focus, textarea:focus {background:#fff;border:1px solid #555;}
blockquote {font-style:italic;}

ändra fetmarkerat, och se till att totalbredden blilr intakt (totalt 810px):

/* Content */

#content {
float: left;
width: 530px;
padding: 0px 0px 0px 0px;
margin-bottom: 40px;
}


/* Sidebar */

#sidebar {
float: right;
width: 280px;
margin: 0px;
color: #666;
}


MEN du bör, i din html-kod även ha en div som heter <div id="sidebar"> innehåll i högerspalt </div> Om du tar bort hela den <div>:en och ändrar bredden på #content till 710px (eller hur brett du föredrar, så borde du ta bort högerspalten helt och hållet.

Testa och återkom om det inte funkar :)

Hm.. det som händer när jag ändrar på det fetmarkerade är att själva textkolumnen flyttar på sig. Den blir alltså varken bredare eller smalare :/


Och HTML-koden kan jag inte ändra på. Den är låst så det ända jag kan göra ändringar i är CSS-koden. Men det ska alltså gå att fixa till textkolumnen utan att behöva röra HTML?

skulle hjälpa om du postar en bild. vad kör du för utvecklingsmiljö (iom att du inte kommer åt html)?

//yde

Det är jättesvårt att säga vad du behöver göra om man bara har tillgång till css-koden.

Jag uppfattade det som att du utgick från en html- och css-mall, men du kanske använder någon form av publiceringssystem? Är det wordpress-mall?

Ligger sidan live? Kan du ge en länk till sidan så kan man kika lite lättare..

Jag har startat hemsidan genom www.n.nu. Så jag antar att det inte är någon speciell utvecklingsmiljö jag använder utan mer någon form av publiceringssystem som du friktion säger.
Och i dom redan färdiga mallarna som man kan använda så kan man inte gå in och ändra på HTML-koden.. vilket jag kanske då måste i mitt fall..?

Men så här ser det alltså ut nu med textkolumnen på höger sida som jag gärna vill minska ner på bredden eller ta bort helt.

http://img402.imageshack.us/img402/6485/namnlsss.jpg

hmm. sidan är avstängd tror jag, eller ligger nere pga konstruktion ända tills jag får ordning på den :/

www.necklace.n.nu

publiceringsystemet blir utvecklingsmiljön ;P

det verkar rätt skumt att de inte går att ändra via css, är du säker på att du är i rätt css-fil? det kan finnas en till som tillhör själva mallen, är så fallet så är måste du ändra i den istället. vet att i drupal (som jag använder oftast) så finns det en mapp som heter themes i vilken de olika mallarna med deras tillhörande css:er finns.

om inte annat kan du ju kolla om det finns någon modul du kan hänga på med vilken du kan sätta storleken på fälten.

//Yde - typ...

På vilket sätt menar du att textkolumnerna flyttar på sig? Kan du utveckla lite?

Som Bjäär säger så kan det vara ett annat stylesheet än det som du ändrar i som är kopplat till just det temat som du använder. Jag vet att Jim Westergren som har den där tjänsten använder ett eget CMS som han själv programmerat, men jag vet inte exakt hur det är uppbyggt. Anledningen till att du inte kommer åt att göra den typen av ändringar är antingen för att han inte vill att du ska messa med hans shit, eller för att han vill att du ska betala för att messa med hans shit - jag gissar på det senare.

Utan att komma åt html - kan du inte ta bort högerspalten, men du borde utan problem kunna ändra bredden på höger- och vänsterspalt genom dom ändringarna som jag visade.

Du måste alltså ändra på båda ställena, om du bara ändrar bredden på sidebar, kommer den att bli smalare men fortfarande ligga lika nära huvudspalten.

Skulle du vilja att huvudspalten behåller sin bredd men att vänsterspalten är smalare och längre till höger får du lägga till fetmarkerat (antal pixlar får du ändra efter tycke och smak):


/* Content */

#content {
float: left;
width: 530px;
padding: 0px 0px 0px 0px;
margin-right: 50px;
margin-bottom: 40px;
}

På något konstigt sätt så gick det nu att minska på bredden utan att hela kolumnen flyttades ner!

STORT tack ska ni ha båda två för att ni tog er tid att hjälpa mig! :D

Ett tips är att fixa Web developer toolbar och/eller Firebug till FF. Iofs så va det ju rätt nu. Men till nån annan gång. :)

Den där Web developer toolbar är ju skitbra!! Tack för tipset! :D

Annars; float:left; på båda så sedan margin-right: 20px; på content. =) sedan kan du ändra på width hejvilt.