Problem med CSS, svart kant ved siden av bildet

[Frode99]

Hei.

 

Jeg holder på med å adde en jQuery slideshow controller på min test-side. --> http://www.wrath-legion.com/test/

 

Jeg får ikke fylt ut controllern i full vidde (bildet som brukes som bakgrunn for controller er 255px, men det vises da ikke korrekt. Ved 212px vises det rett, men da med svart kant på høyre side.)

 

CSS:

body {
background-image:url(i/background.jpg);
background-repeat: repeat-x;
background-size: cover;
background-attachment: fixed;
margin: 0;
color: #fff;
font-size: 11px;
font-family: Tahoma , sans-serif;
}

img {
border: none;
}

a {
	color: #ffffff;
	text-decoration: underline;
	}

#left {
width: 642px;
float: left;
margin: 2px 0 0 4px;
}

#feature1 {
background: url(i/news_image1.jpg);
width: 387px;
height: 254px;
display: block;
}

#feature2 {
background: url(i/news_image2.jpg);
width: 387px;
height: 254px;
display: block;
}

#feature3 {
background: url(i/news_image3.jpg);
width: 387px;
height: 254px;
display: block;
}

#feature4 {
background: url(i/news_image4.jpg);
width: 387px;
height: 254px;
display: block;
}

#mySlides {
float: left;
width: 387px;
height: 254px;
z-index: 0;
position: absolute;
}

#myController {
float: right;
margin: 0 4px 0 0;
margin-right: 26px;
z-index: 1;
position: relative;
}

.jFlowControl {
background: url(i/news_right.jpg);
width: 212px;
height: 41px;
display: block;
padding: 11px 19px;
color: #969696;
cursor: pointer;

}

#myController div.jFlowSelected {
background: url(i/new_right.png);
margin: 0 0 0 -5px;
width: 212px;
height: 41px;
display: block;
padding: 11px 19px 11px 24px;
color: #969696;
}

.jFlowControl strong {
font-weight: normal;
color: #dedede;
}

 

HTML:

            <div class="main_con">
           	<div class="left_col">
               	<div class="slideshow_con">
      	<div id="myController">
           <div class="jFlowControl">
           	<strong>TERA Arrives</strong>
			<p>Text</p> 
		</div>
           <div class="jFlowControl">
           	<strong>TERA Arrives</strong>
			<p>Text</p> 
		</div>
           <div class="jFlowControl">
           	<strong>TERA Arrives</strong>
			<p>Text</p> 
		</div>
           <div class="jFlowControl">
           	<strong>TERA Arrives</strong>
			<p>Text</p> 
		</div>
       </div>
       <div id="mySlides">
           <a id="feature1" href="http://www.wrath-legion.com"></a>
           <a id="feature2" href=""></a>
           <a id="feature3" href=""></a>
           <a id="feature4" href=""></a>
       </div>

 

Det ser ikke så veldig bra ut med det svarte feltet Forslag?

[EnvyAndroid]

hvis du i #mycontroller setter

margin-right: 26px;

 

til

 

margin-right: 0px;

 

forsvinner den svarte kanten, og hvis du øker width på .jFlowControl, minsker du det svarte mellomrommet imellom bilder og tabs (men da må muligens lage nye bakgrunnsbilder for tabsene.

(eller bruke css istedetfor bilder)

Endret 16. februar 2012 av EnvyAndroid

[Frode99]

hvis du setter

margin-right: 26px;

 

til

 

margin-right: 0px;

 

forsvinner den svarte kanten, og hvis du øker width på .jFlowControl, minsker du det svarte mellomrommet imellom bilder og tabs (men da må muligens lage nye bakgrunnsbilder for tabsene.

(eller bruke css istedetfor bilder)

 

Takk for svar.

 

Det var naturligvis det første jeg prøvde. Men, av en eller annen grunn vises det da slik:

[EnvyAndroid]

satt du det i #mycontroller?

vises annerledes i firefox,

 

også sett no-repeat på bakgrunnsbildet i .jFlowControl

men som sagt, det ser slik ut pga bildet er av fast størrelse, de må lages litt større, og justere width i .jFlowControl tilsvarende.

 

tips, prøv firebug for firefox

[Frode99]

Jeg bruker FF. Det vistes forskjellig siden jeg ikke lastet det opp, jeg bare endret filen lokalt Prøv å se nå

 

Jeg hadde håpet jeg slapp å lage bildet lenger, men ser vel ut til at jeg må

 

EDIT: No-repeat gjør bare at vi kommer tilbake til start med svart kant på høyre side.. Damn.

Endret 16. februar 2012 av Frode99

[Værktøy]

Er ett eller annet med width i koden din.

Endret 16. februar 2012 av thypthon

[EnvyAndroid]

EDIT: No-repeat gjør bare at vi kommer tilbake til start med svart kant på høyre side.. Damn.

 

ja, også lager du bildet bredere

[Frode99]

Yes. Da var det egentlig slik jeg tenkte, men tenkte jeg skulle høre først in case det var en enklere måte