[CSS]Div te.. smal ? border breekt weg! - Forum

- - wes -

03-08-2007 12:31

Niek kap daar nou es mee. Hoe denk je nou serieus dat we je kunnen helpen hiermee als je niet eens de css van die divs post, of hoe de layout er nu uitziet aan de 'achterkant' ...

L Lord Niek

03-08-2007 12:32

jullie kunnen toch de broncode zien ?

- - wes -

03-08-2007 12:33

jij hebt het gemaakt
jij weet waar het te vinden is
je broncode staat vol crap en is onoverzichtelijk
je css staat in een stylesheet
ik ga niet alles bij mekaar zoeken

P Paul K

03-08-2007 12:33

Dan moeten wij extra moeite voor jou gaan nemen :| :P
Probeer iets met css hacks:

L Lord Niek

03-08-2007 12:36

Die heb ik al 2, Paul.. Eentje voor IE, en eentje nog extra voor IE7.
dit is mijn CSS:


body {
	font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
    font-size: 10px;
    text-align: center;
}

.clear {
    clear: both;
}

#clear {
    clear: both;
}

.zwart {
    color: #000;
}

.pinktext {
    color: #000;
}

#content {
    margin-top: 90px;
    margin: auto;
    width: 890px;
	padding: 5px;
	margin-bottom: 10px;
    text-align: left;
        font-family: Verdana, Arial, Helvetica, Geneva, Swiss, SunSans-Regular;
    font-size: 10px;
}

.top-left, .top-right, .bottom-left, .bottom-right { 
	background-image: url('images/corners.gif');
	height: 9px;
	font-size: 2px;
}
	
.top-left, .bottom-left { 
	margin-right: 9px;
}
	
.top-right, .bottom-right { 
	margin-left: 9px;
	margin-top: -9px;
}

.top-right {
	background-position: 100% 0;
}
	
.bottom-left  { 
	background-position: 0 -9px;
}
	
.bottom-right { 
	background-position: 100% -9px;
}
	
.inside {
	border-left: 1px solid #C00000;
	border-right: 1px solid #C00000;
	background: #EFEFEF;
	color: #000000;
	padding-left: 10px;
	padding-right:10px;
}

.notopgap    { margin-top: 0; } 
.nobottomgap { margin-bottom: 0; } 

.inside-small {
     padding: 1px 3px;
}

.negative-top h2 {
     margin: -12px 0 20px 0;
}

.negative-bottom p {
     position: relative;
     margin: 20px 0 -8px 0;
}
.cornerexample2, .cornerexample3, .cornerexample4,  .cornerexample5,  .cornerexample6 {
	position: relative;
	width:60%;
	margin: 0 auto;
	padding:1em;
	text-align:left;
}

.content {
	width:60%;
	margin: 15px auto;
	padding:1em;
	background: #ffffff;
	color: #000000;
	text-align:left;
}

.inside {
	border-left: 1px solid #C00000;
	border-right: 1px solid #C00000;
	background: #ffffff;
	color: #000000;
	padding-left: 10px;
	padding-right:10px;
}

h2, p { 
	margin: 20px 0;
}

.inside2 {
	border-left: 1px solid #C00000;
	border-right: 1px solid #C00000;
	background: #ffffff;
	color: #000000;
	padding-left: 10px;
	padding-right:10px;
}

.inside4, .inside5, .inside6 {
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	background: #ffffff;
	color: #000000;
	padding-left: 10px;
	padding-right:10px;
	padding-top: 1px;
	padding-bottom: 1px;
}

.inside-small { 
	border-left: 1px solid #000000;
	border-right: 1px solid #000000;
	background: #ffffff;
	color: #000000;
	padding: 1px 3px;
}

.negative-top h2 {
	margin: -12px 0 20px 0;
}

.negative-bottom p {
	position: relative;
	margin: 20px 0 -8px 0;
}
	

#leftbox {
    width: 160px;
	padding: 5px;
	float: left;
    text-align: left;
}

#contentbox {
    margin-left: 175px;
    margin-right: 175px;
    border-left: 1px dashed #DEA84E;
    border-right: 1px dashed #DEA84E;
    padding-left: 5px;
    padding-right: 5px;
}

#rightbox {
    float: right;
	width: 160px; 
    padding: 5px;
    text-align: left;
}

#rightbox ul {
    list-style-image: url(images/listdot.gif);
    padding: 0px;
    margin: 0px;
    margin-top: 3px;
    padding-left: 15px;
}

#leftbox ul {
    list-style-image: url(images/listdot.gif);
    padding-left: 15px;
}

.column {
	padding-bottom: 1001em;
	margin-bottom: -1000em;
}

.inside-small {
    overflow: hidden;
}

En mijn html is dit (waar het om gaat tenminste):


        <div class="column" id="content">^M
            <div class="top-left"></div>^M
            <div class="top-right"></div>^M
            <div class="inside-small">^M
                <div class="gap-saver"></div>^M
                <div id="leftbox">^M
                    <?php mosLoadModules ( 'left', -2 ); ?>^M
                </div>^M
                <div id="rightbox">^M
                    <?php mosLoadModules ( 'right', -2 ); ?>^M
                </div>^M
                <div id="contentbox">^M
                    <?php if(mosCountModules('top') == 1) { mosLoadModules( 'top' , -2); } ?>
                    <?php mosMainBody(); ?>^M
                </div>^M
                <div id="clear">&nbsp;</div>^M
                <div class="gap-saver"></div>^M
            </div>^M
            <div class="bottom-left"></div>^M
            <div class="bottom-right"></div>^M
            <div id="footer">^M
                            footer^M
                <br /><hr />^M
            </div>^M
        </div>^M

w winkie

03-08-2007 12:42

Hey Niek,

Wel eens gehoord van het woord: 're-le-vant'?

Kortom; post NIET je hele CSS maar alleen het stukje wat ertoe doet.

- - wes -

03-08-2007 12:42

post dan ook alleen je relevante css

w winkie

03-08-2007 12:47

2 zielen...

A ArendJan

03-08-2007 12:51

BTW, je moet wel heel slecht zijn in css wil je met 2(!) hacks de pagina's nog niet netjes kunnen weergeven. Maar allee daar ga ik niet over....

P PHP erik

03-08-2007 13:21

Ondanks de slechte informatievoorziening in dit topic heb ik de oplossing voor je en hij is vrij simpel, klik.