Gå til innhold

[løst] Hjelp til å øke avtanden mellom tekst og..

R@ge

Av R@ge
i Programmering og webutvikling

Anbefalte innlegg

R@ge

R@ge

Skrevet
Skrevet (endret)

Jeg håper noen kan hjelpe meg litt her....

 

Jeg finner ikke helt ut hvordan jeg øker avstanden mellom bilder og tekst på bloggen min....

 

Eksempel:

howdoiadjustthedistancebetw.jpg

 

Det gjelder ikke bare dette bildet, men alle bilder altså....

 

Se alternativt www.sinna.no for flere eksempler

 

Kanskje noen med letthet kan se hva jeg mangler?

 

 

klikk her for å se hele style.css filen

Klikk for å se/fjerne innholdet nedenfor

 

body {

 

margin:5px 0;

 

padding:0;

 

color:#ccc;

 

background: #1c1c1c;

 

background-image: url('images/background01.jpg');

 

background-repeat: repeat-x;

 

background-position: top center;

 

line-height: 1.4em; font-style:normal; font-variant:normal; font-weight:normal; font-size:74%; font-family:Verdana, Arial, Sans-Serif

 

}

 

 

 

a img

 

{

 

border:none;

 

}

 

 

 

 

 

.content {

 

background: url('images/mainbg.jpg') repeat-y center;

 

color: #ccc;

 

margin: 0 auto;

 

padding: 0;

 

width: 800px

 

}

 

 

 

.img {

 

padding: 0 8px 8px 0;

 

float: left;

 

}

 

 

 

.img2 {

 

padding: 0 0 3px 3px;

 

float: right;

 

}

 

 

 

 

 

 

 

/* HEADER

 

---------------------------------------------------------------------------------------------------------------------------------------------------

 

*/

 

#top {

 

padding: 0;

 

margin: 0;

 

background: url('images/top.jpg') no-repeat top;

 

height: 44px

 

}

 

 

 

#top .padding {

 

float: right;

 

color: #808080;

 

padding: 20px 25px 0 0;

 

font-size: 90%;

 

}

 

 

 

#top a { color: #000000; }

 

 

 

 

 

#header {

 

margin: 0;

 

margin-left:15px;

 

width: 771px;

 

background: #1e1e1e url('images/header.jpg') no-repeat center top;

 

height: 208px;

 

color: #FFF

 

}

 

 

 

#headerlink {width: 771px; height:208px; }

 

 

 

#header .f_search { float: left; padding: 10px 10px 0 45px; }

 

#header .title { padding: 45px 0 0 50px; }

 

#header h1 {

 

font-family: Arial, Verdana, Helvetica, sans-serif;

 

font-size: 22px; font-weight: bold;

 

margin: 0;

 

padding: 0;

 

}

 

 

 

#header h2 {

 

font-family: Arial, Verdana, Helvetica, sans-serif;

 

font-size: 12px;

 

background-image: url('images/none');

 

color: #075181;

 

margin: 0;

 

padding-left:2px; padding-right:0; padding-top:0; padding-bottom:0

 

}

 

 

 

 

 

/* SUBHEADER

 

---------------------------------------------------------------------------------------------------------------------------------------------------*/

 

#subheader {

 

background: #000 repeat-y center;

 

width: 771px;

 

height: 32px;

 

color: #FFF;

 

margin-left: 15px;

 

 

 

}

 

#subheader .padding { padding: 10px 15px 10px 15px; }

 

#subheader h2 { color: #FEAB06; }

 

#subheader a {color: #FECF5F; }

 

 

 

 

 

 

 

/* NAVIGATION

 

---------------------------------------------------------------------------------------------------------------------------------------------------*/

 

.nav { text-align: left; color: #7D8085;

 

margin: 5px 20px 5px 35px;

 

padding: 0px 20px 0 35px;

 

width: 150px; }

 

 

 

.nav li {

 

margin: 5px 0px 5px 0px;

 

border-bottom: 1px dotted #ccc;

 

 

 

list-style: none;

 

}

 

.nav li a { color: #546078; text-decoration: none; padding: 5px 0 0 0px; display: block; margin-bottom: 2px;}

 

.nav li a:hover { color: #FFF; text-decoration: none; background: #555; display: block; margin-bottom: 2px;}

 

 

 

 

 

/* MAIN

 

---------------------------------------------------------------------------------------------------------------------------------------------------*/

 

#main { width: 760px; margin: 0 20px 0 20px; color: #808080; padding-top:20px;}

 

#main .right_side { float: right;

 

background: url('images/sidebar02.jpg') repeat-y center;

 

width: 300px;

 

height: 100%;

 

}

 

 

 

ul.tagcloud {

 

margin: 5px 20px 5px 35px;

 

padding: 0px 20px 0 35px;

 

background: none;

 

text-align: left;

 

}

 

 

 

ul.tagcloud li {

 

margin: 5px 20px 5px 35px;

 

padding: 0px 20px 0 35px;

 

background: none; list-style: none;

 

display: inline;

 

}

 

 

 

 

 

ul.tagcloud li a {

 

display:inline;

 

padding:0;

 

}

 

 

 

 

 

ul.tagcloud li a:hover {

 

text-decoration:underline;

 

background-color:transparent;

 

}

 

 

 

ul#tagcloud { text-align:center; list-style:none; }

 

ul#tagcloud li { display:inline; font-size:70%; color:#ccc;}

 

ul#tagcloud li a, ul#tagcloud li a:link { text-decoration:none; }

 

ul#tagcloud li a:hover { text-decoration:underline; }

 

ul#tagcloud li.t1 a { color:#d0d0d0; font-size: 120%; }

 

ul#tagcloud li.t2 a { color:#c4c4c4; font-size: 140%; }

 

ul#tagcloud li.t3 a { color:#b8b8b8; font-size: 160%; }

 

ul#tagcloud li.t4 a { color:#acacac; font-size: 180%; }

 

ul#tagcloud li.t5 a { color:#a0a0a0; font-size: 190%; }

 

ul#tagcloud li.t6 a { color:#949494; font-size: 200%; }

 

ul#tagcloud li.t7 a { color:#999999; font-size: 210%; }

 

ul#tagcloud li.t8 a { color:#919191; font-size: 220%; }

 

ul#tagcloud li.t9 a { color:#858585; font-size: 230%; }

 

ul#tagcloud li.t10 a { color:#797979; font-size: 240%; }

 

ul#tagcloud li.t11 a { color:#6d6d6d; font-size: 250%; }

 

ul#tagcloud li.t12 a { color:#616161; font-size: 260%; }

 

ul#tagcloud li.t13 a { color:#555555; font-size: 270%; }

 

ul#tagcloud li.t14 a { color:#484848; font-size: 280%; }

 

ul#tagcloud li.t15 a { color:#3c3c3c; font-size: 290%; }

 

ul#tagcloud li.t16 a { color:#303030; font-size: 300%; }

 

ul#tagcloud li.t17 a { color:#242424; font-size: 310%; }

 

ul#tagcloud li.t18 a { color:#181818; font-size: 320%; }

 

ul#tagcloud li.t19 a { color:#0c0c0c; font-size: 330%; }

 

ul#tagcloud li.t20 a { color:#000000; font-size: 340%; }

 

 

 

#tagcloud {

 

width: 150px;

 

}

 

 

 

#main .right_side .hitems { margin: 10; padding: 0; }

 

#main .right_side .hitems ul {

 

margin: 5px 0;

 

padding : 0;

 

color: #a90000;

 

list-style-image: url('images/arrow.gif');

 

}

 

 

 

#main .right_side .hitems li {

 

margin: 0 0 2px 20px;

 

padding: 0 0 0 0px;

 

color: #555;

 

 

 

}

 

 

 

#main .left_side { float: left; width: 415px; padding:15px 0 0 40px; margin:0; }

 

#main h3 { font: 85% Arial, Sans-Serif; margin: 0 0 10px 0px; padding: 0; color: #5f5f5f; background: inherit;

 

border-bottom: 1px solid #036CB4;

 

}

 

 

 

#main .box { background: #efefef; padding: 5px; border: 1px solid #ccc;}

 

 

 

#main .right_side ul {

 

margin: 5px 0 5px 0;

 

padding : 0;

 

list-style : none;

 

border-bottom: 0px solid #eee;

 

list-style-type: square;

 

color: #a90000;

 

}

 

 

 

#main .right_side li {

 

margin: 0 0 2px 15px;

 

padding: 0 0 0 0px;

 

color: #555;

 

}

 

 

 

#main .right_side .padding {

 

margin: 0 0 20px 15px;

 

padding: 0 0 0 0px;

 

color: #555;

 

}

 

 

 

 

 

/* FOOTER

 

---------------------------------------------------------------------------------------------------------------------------------------------------*/

 

#footer {

 

clear:both;

 

height: 43px;

 

color:#ccc;

 

background: url('images/footer.jpg') no-repeat top;

 

font-size:90%;

 

padding: 0;

 

text-align:center

 

}

 

 

 

#footer .padding { padding: 10px 0px 0px 0px; }

 

#footer .right {

 

float:right;

 

clear:right;

 

text-align:right;

 

}

 

 

 

#footer a { color: #E0F5FF; }

 

 

 

/* Top Menu */

 

#menu {

 

background: #000 url('images/menu.jpg') no-repeat center bottom;

 

width: 760px;

 

height: 32px;

 

margin: 0;

 

padding: 0

 

}

 

 

 

#menu ul { margin:0; list-style:none; padding: 5px 0 0 20px; }

 

 

/*

RAGE : Her endrer jeg fargen på Sidene!! (pages) som kontakt oss og det der

*/

#menu a, #nav strong, #nav span { float:left; display:block; color:#fff; padding: 5px; text-decoration:none; }

 

#menu a { float:none; }

 

#menu li { float:left; color: #FFF; background: #000; margin:0; padding:0 0 0 0px; }

 

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

 

#menu .padding { padding: 5px 0 0 10px; font-weight: bold; }

 

 

 

 

 

 

 

 

 

/* ---------------------------------------------------------------------------------------------------------------------------------------------------*/

 

 

 

input.search { width: 150px; border: 1px solid #075181; color: #666; }

 

input.submit {

 

background: none;

 

color: #E6E6E6;

 

border: 0px none;; font-style:normal; font-variant:normal; font-weight:bold; font-size:1.1em; font-family:Arial, Verdana, Helvetica, sans-serif

 

}

 

 

 

input.search:hover { background: #FFFFF4; }

 

 

 

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

 

li { margin: 0 0 2px 15px; padding: 0 0 0 0px; color: #555; }

 

.sub {margin: 0 0 2px 30px; padding: 0 0 0 0px; color: #888; }

 

 

/*

HER ENDRET RAGE LINJESKIFT HØYDEN FRA 0 TIL

HER ENDRET JEG LINJESKIFT HØYDEN FRA 0 TIL

HER ENDRET JEG LINJESKIFT HØYDEN FRA 0 TIL

HER ENDRET JEG LINJESKIFT HØYDEN FRA 0 TIL

HER ENDRET JEG LINJESKIFT HØYDEN FRA 0 TIL

font-weight: bold;

 

ORIGINALT:

p { margin: 0 0 5px 0; padding: 0; color: #505050; background: inherit; }

 

a { color: #0D1BDB; background: inherit; text-decoration:bold; }

 

a:hover { background: FFF; text-decoration:underline; }

 

*/

 

 

p { margin: 1 0 5px 0; padding: 0; color: #505050; background: inherit; }

 

a { color: #010656; background: inherit; text-decoration:none; }

 

a:hover { background: FFF; text-decoration:underline; }

 

/*

SLUTT på mine endringer!

*/

 

 

 

h1 {

 

padding:0;

 

margin:0;

 

color: #FFF;

 

background: inherit;

 

font: bold 1.8em Arial, Sans-Serif;

 

letter-spacing: -1px;

 

}

 

 

 

h1 a { color: #FFF; background: inherit; }

 

 

 

h2 {

 

 

 

color:#555;

 

font-size:150%;

 

font-weight:bold;

 

margin-top:15px;

 

margin-bottom:15px;

 

padding-top:15px;

 

text-align: right;

 

}

 

 

 

h2 a { color: #555; }

 

h2 a:hover { color: #68ADD5; text-decoration:none; }

 

 

 

fieldset { border: 1px solid #075181; }

 

textarea.text {

 

height: 150px;

 

width: 90%;

 

border: 1px solid #A90000;

 

background: #FFF;

 

color: #354D5F;

 

}

 

 

 

textarea.text:hover {

 

border: 1px solid #A70000;

 

background: #FFFFF4;

 

color: #000;

 

}

 

 

 

input.field {

 

border: 1px solid #075181;

 

background-color: #FFFFFF;

 

width: 283px;

 

color: #000;

 

}

 

 

 

input.field:hover {

 

border: 1px solid #68ADD5;

 

background: #FFFFF4;

 

color: #000;

 

}

 

 

 

input.text {

 

border: 1px solid #A70000;

 

margin: 0;

 

width: 150px;

 

background: inherit;

 

color: #000;

 

padding: 4px;

 

 

 

}

 

 

 

 

 

input.text:hover {

 

border: 0px solid #68ADD5;

 

}

 

 

 

.date {

 

color: #808080;

 

background: #FFFFFF;

 

text-align: right;

 

margin: 4px 0 5px 0;

 

padding: 0.4em 0 0 0;

 

border-top: 1px solid #eee;

 

}

 

 

 

.comments {

 

padding: 10px 10px 8px 10px;

 

margin: 0 0 7px 0;

 

background: #f8f8f8;

 

color: #000;

 

}

 

 

 

.commentsbox {

 

padding: 8px 0 10px 10px;

 

margin: 0 0 10px 0;

 

background: #f4f4f4;

 

color: #000;

 

}

 

 

 

.error {

 

color: #990000;

 

background-color: #FFF0F0;

 

padding: 7px;

 

margin-top: 5px;

 

margin-bottom: 10px;

 

border: 1px dashed #990000;

 

}

 

.error h2 {

 

color: #990000;

 

background: inherit;

 

}

 

 

 

.success {

 

color: #000000;

 

background: #F5FBE1;

 

padding: 7px;

 

margin-top: 5px;

 

margin-bottom: 5px;

 

border: 1px dashed #7BA813;

 

}

 

.success h2 {

 

color: #7BA813;

 

background: inherit;

 

}

 

 

 

 

 

/*post stylng*/

 

.post{margin:0 0 25px 0;}

 

 

 

.post .info{

 

padding:2px 3px 3px 8px;

 

background-color:#DDD;

 

font-size:0.9em;

 

color:#5F5F5F;

 

}

 

 

 

 

 

 

 

 

 

/*comment styling*/

 

/* Comments Styling */

 

#commentlist li {

 

margin-bottom: 1.5em;

 

padding-bottom: 1em;

 

border-bottom: 1px solid #700000;

 

}

 

/*

RAGE : har endret fargen på commentboksen slik at den passer til themet

*/

 

#commentform {

 

margin:0px auto;

 

background: #F9FAFC;

 

font-size:1.0em;

 

width: 280px;

 

}

 

 

 

#commentform textarea {

 

background: #f8f7f6;

 

border: 1px solid #d6d3d3;

 

width: 280px;

 

}

 

#commentform textarea:hover {

 

background: #FFFFFF;

 

border: 1px solid #d6d3d3;

 

}

 

#commentform textarea:focus {

 

background: #ffffff;

 

border: 1px solid #939793;

 

}

 

 

 

#commentform #email, #commentform #author, #commentform #url {

 

font-size: 1.1em;

 

background: #f8f7f6;

 

border: 1px solid #d6d3d3;

 

width: 280px;

 

}

 

#commentform #email:hover, #commentform #author:hover, #commentform #url:hover {

 

font-size: 1.1em;

 

background: #ffffff;

 

border: 1px solid #d6d3d3;

 

width: 280px;

 

}

 

#commentform #email:focus, #commentform #author:focus, #commentform #url:focus {

 

font-size: 1.1em;

 

background: #ffffff;

 

border: 1px solid #939793;

 

width: 280px;

 

}

 

#commentform input{

 

margin-bottom: 3px;

 

}

 

 

EDIT: denne saken er løst, takk for hjelpen

Endret av R@ge
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
gozzer

gozzer

Skrevet
Skrevet

Istedenfor å bruke sette inn bildet ditt på denne måten: <img align="left" ...

 

Ser det ut til at du bør bruke klassen som heter 'img'. Nå vet jeg jo ikke hvordan type cms denne bloggen har, men du har sikkert mulighet til å fikse det på en eller annen måte :)

Lenke til kommentar
R@ge

R@ge

Skrevet
  • Forfatter
Skrevet (endret)

Hei Kim...

 

Det der fungerte utmerket, men det oppsto et nytt problem når jeg endret dette...

 

Bakgrunnsbildet i menyen til venstre ble også flyttet og det ble jo ikke så bra da.

 

howdo.jpg

 

 

 

Dette bildet ble altså flyttet 5px:

sidebar01.jpg

 

Dette bildet henets fra filen sidebar.php:

<img src="<? bloginfo('template_directory'); ?>/images/sidebar01.jpg" alt="Meny" />


			<div class="nav">

 

 

 

På bunnen av menyen er det samme problemet:

 

Dette bilet ble altså flyttet 5px:

sidebar03.jpg

 

På bunnen av sidebar.php finner jeg:

<?php endif; ?><p /></div><img src="<? bloginfo('template_directory'); ?>/images/sidebar03.jpg" alt="sidebar image" /></div>

 

 

Er det noen måte å sette minus 5px på denne slik at den blir rett igjen?

Endret av R@ge
Lenke til kommentar
Jakob K

Jakob K

Skrevet
Skrevet 

<img src="<? bloginfo('template_directory'); ?>/images/sidebar01.jpg" alt="Meny" style="margin: 0;" />

Slik?

 

Eventuelt kan du legge en klasse på de bildene som ikke skal ha margin og i CSS-fila definere at den klassen skal ha margin: 0; :)

Lenke til kommentar
Kim T

Kim T

Skrevet
Skrevet

Måten bildet legges inn i designet er ikke optimal og heller ikke riktig. Den burde ligge som et bakgrunnsbilde og ikke hentes inn som "info" slik den gjøres nå. Men du kan forsøke dette.

 

.right_side img {

margin: 0;

}

Dette er ikke en helt ideel løsning men siden jeg regner med at det ikke er du som har laget koden vil jeg forsøke med dette og se om det løser problemet ditt.

 

Kim

Lenke til kommentar
R@ge

R@ge

Skrevet
  • Forfatter
Skrevet 
<img src="<? bloginfo('template_directory'); ?>/images/sidebar01.jpg" alt="Meny" style="margin: 0;" />

Slik?

8934698[/snapback]

 

Det fungerte helt topp det der ja....

 

Mulig løsningen til Kim også ville fungert,

men siden jeg også kunne bruke samme metode på bildene i denne teksten (som også ble feil) så var vel dette mest optimalt.

 

timeicon.gif lørdag 23. juni 2007 av author.gif Rage

 

Tuuuuusen takk for hjelpen folkens... Utrolig kjapt, og mesterlig ekspertise.....

 

[case closed]

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...