☰

» »

poravnava li elementov

poravnava li elementov

boss-tech ::

Zanima me kako pravilno naredit stile, da imaš lepo pravnan ul ter vse njegove elemente:

<div width="x">
    <ul>
        <li>
        ...
        <li>
    </ul>
</div>
http://tovornik.info

PurpleMoo ::

Mislim, da boš moral bolj natančno razložiti, kaj misliš z "lepo poravnan ul ter vse njegove elemente". Oziroma vsaj jaz ne kapiram.

Isotropic ::

definiras pac left margin al kako se ze rece za li pa je.
itak so pa poravnani ze po defaultu, brez stilov.

pa rocno pisanje html ni lih produktivno, nauči se osnove (in css), da bos znal rocno popravljati kaj (oz. spisati html v php kodi recimo), potem pa prešaltaj na dreamweaver.

DarkSensei ::

(oz. spisati html v php kodi recimo)

V stilu 
echo "<html>"
? Fuj.

potem pa prešaltaj na dreamweaver.

Kaj manjka Sublime textu (oz. kateremkoli editorju) s par dodatki?

boss-tech ::

Uporabljam kar text editor in stile v css. Problem imam z meniji v joomli, ki jih s kodo nekak spravi skupaj, tudi stile. Pa je mal zakomplicirano. V firefox poravna ok, v debilnem IE pa ne. Pa moram stvar nekako rešit. Pa bi rad začel od začetka
http://tovornik.info

Zgodovina sprememb…

Arto :: 

ul {
    list-style: none;
    padding: 0;
}


To ti resetira zamike in krogce na seznamih. Potem pa sam naštimaj kakor hočeš.

Gandalfar ::

boss-tech je izjavil:

Uporabljam kar text editor in stile v css. Problem imam z meniji v joomli, ki jih s kodo nekak spravi skupaj, tudi stile. Pa je mal zakomplicirano. V firefox poravna ok, v debilnem IE pa ne. Pa moram stvar nekako rešit. Pa bi rad začel od začetka


Daj spravi skupaj cel primer v jsfiddle.

boss-tech ::

Ta fiddle mi ga sploh ne spravi skupaj, sem sicer dal vse 3 css fajle od tega modula zraven. Bom še poskušal

Drugače pa je nakako takole:

 <div class="maxiroundedcenter">
            <ul class="menu menumax maximenuck" >
       
<li class="maximenuck item162 first level1 " style="z-index : 12000;"><a class="maximenuck " href="/"><img src="/images/ikone/home1.png" alt="Home"/></a>
		</li>
<li class="maximenuck item346 level1 " style="z-index : 11999;"><a class="maximenuck " href="/index.php/"><span class="titreck">1</span></a>
		</li>
<li class="maximenuck item331 level1 " style="z-index : 11998;"><a class="maximenuck " href="/index.php/"><span class="titreck">2</span></a>
		</li>
<li class="maximenuck item340 level1 " style="z-index : 11997;"><a class="maximenuck " href="/index.php/"><span class="titreck">3</span></a>
		</li>
<li class="maximenuck item164 parent level1 " style="z-index : 11996;"><a class="maximenuck " href="/index.php/"><span class="titreck">3</span></a>
		</li>           </ul>
        
        </div>


-----------------------------------------------
/**
** This file assume the good working conditions
** No styling (color, background,...) should be made here, only positionning and management
**/


div.maximenuckh ul.maximenuck {
    clear:both;
    position : relative;
    z-index:999;
}


div.maximenuckh ul.maximenuck > ul {
    clear:both;
    padding : 0;
    margin : 0;
}

div.maximenuckh ul.maximenuck .moduletable {

}

div.maximenuckh ul.maximenuck li.maximenuck {
    float:left;
    position:relative;
    text-align : left;
    padding : 0;
    margin : 0;
}

div.maximenuckh ul.maximenuck li.maximenuck img {

}

div.maximenuckh ul.maximenuck li.maximenuck a,
div.maximenuckh ul.maximenuck li.maximenuck span.separator {
    display:block;
    float : none !important;
    float : left;
    position:relative;
}

div.maximenuckh ul.maximenuck2 li.maximenuck a,
div.maximenuckh ul.maximenuck2 li.maximenuck span.separator {
    float : none !important;
}

div.maximenuckh ul.maximenuck li ul.maximenuck2 {
    display:block;
    z-index:11000;
    clear:left;
    margin:0;
    padding:0;
    text-align : left;
    position : static;
}

div.maximenuckh ul.maximenuck li ul li.maximenuck {
    text-align : left;
    position : relative;
    z-index : 11001;
    padding:0;

}

div.maximenuckh ul.maximenuck li li.maximenuck a {
    display: block;
    padding : 0;
    margin : 0;
}

div.maximenuckh div.maximenuck2 {
    float : left;
    margin : 0;
    padding : 0;
    /*width : 180px;*/ /* A TESTER */
}

div.maximenuckh div.clr {
    clear : both;
    visibility : hidden;
}

/* child items */
div.maximenuckh ul.maximenuck li div.floatck {
    position : absolute;
    left: -999em; /* a supprimer pour effet slide */
    padding : 0;
    margin : 0;
    background : url(../images/transparent.gif); /* important for hover to work good under IE7 */
}

div.maximenuckh div.floatck ul, div.maximenuckh div.floatck ul li {
    position : static;
    /*height : 100%;*/
}

div.maximenuckh ul.maximenuck li.maximenuck div.floatck.fixRight  {
right:0;
}

div.maximenuckh ul.maximenuck li.maximenuck div.floatck div.floatck.fixRight  {
right:0;
}


/**
** fancy parameters
**/
div.maximenuckh li.maxiFancybackground {
    z-index: 8;
    position: absolute;
    top : 0;
}



/**
** Show sub menu if mootools is off - horizontal style
**/
div.maximenuckh ul.maximenuck li:hover div.floatck div.floatck, div.maximenuckh ul.maximenuck li:hover div.floatck:hover div.floatck div.floatck, div.maximenuckh ul.maximenuck li:hover div.floatck:hover div.floatck:hover div.floatck div.floatck,
div.maximenuckh ul.maximenuck li.sfhover div.floatck div.floatck, div.maximenuckh ul.maximenuck li.sfhover div.floatck.sfhover div.floatck div.floatck, div.maximenuckh ul.maximenuck li.sfhover div.floatck.sfhover div.floatck.sfhover div.floatck div.floatck {
left: -999em;
}

div.maximenuckh ul.maximenuck li:hover div.floatck, div.maximenuckh ul.maximenuck li:hover div.floatck li:hover div.floatck, div.maximenuckh ul.maximenuck li:hover div.floatck li:hover div.floatck li:hover div.floatck, div.maximenuckh ul.maximenuck li:hover div.floatck li:hover div.floatck li:hover div.floatck li:hover div.floatck,
div.maximenuckh ul.maximenuck li.sfhover div.floatck, div.maximenuckh ul.maximenuck li.sfhover div.floatck li.sfhover div.floatck, div.maximenuckh ul.maximenuck li.sfhover div.floatck li.sfhover div.floatck li.sfhover div.floatck, div.maximenuckh ul.maximenuck li.sfhover div.floatck li.sfhover div.floatck li.sfhover div.floatck li.sfhover div.floatck {
left: auto;
}

div.maximenuckh div.maximenuck_mod ul {
left : auto;
}

-----------------------------------------------
maxinemuck.php


.clr {clear:both;}

/*-------------------------
---	 global styles		---
--------------------------*/

/* for z-index layout */
div#maximenuck {
}

/* container style */
div#maximenuck ul.maximenuck {
    background :  url(../images/fond_bg.png) top left repeat-x;
    height : 50px;
    padding: 0;
    margin: 0 auto;
    overflow: visible !important;
	display: block !important;
	float: none !important;
	visibility: visible !important;
    width: 973px;
}

div#maximenuck ul.maximenuck li.maximenuck {
    background : none;
    list-style : none;
    border : none;
}

/* link image style */
div#maximenuck ul.maximenuck li.maximenuck > a img {
    margin : 3px;
    border : none;
}

/* img style without link (in separator) */
div#maximenuck ul.maximenuck li.maximenuck img {
    border : none;
	clear: both;
}

div#maximenuck ul.maximenuck li a.maximenuck,
div#maximenuck ul.maximenuck li span.separator {
    text-decoration : none;
    text-indent : 2px;
	min-height : 50px;
    outline : none;
    background : none;
    border : none;
    padding : 0;
    color : #ccc;
    white-space: normal;
}


/*-------------------------
---	 active items		---
--------------------------*/

/* active parent title */
div#maximenuck ul.maximenuck li.active > a span.titreck {
    color : #003D65;
}

/* active parent description */
div#maximenuck ul.maximenuck li.active > a span.descck {

}

/* active parent title */
div#maximenuck ul.maximenuck li.active > a:hover span.titreck {
    color : #003D65;
}

div#maximenuck ul.maximenuck li.level1.active > a span.titreck {
    color : #F0C723;
}

/* active parent description */
div#maximenuck ul.maximenuck li.level1.active > a span.descck {

}

/* active parent title */
div#maximenuck ul.maximenuck li.level1.active > a:hover span.titreck {
    color : #F0C723;
}

/*-----------------------------
---	 1st level items		---
------------------------------*/

div#maximenuck ul.maximenuck li.level1 {
    padding : 0 1.5% 0 0;
    margin:auto;
    /*background : url(../images/separator.png) top right no-repeat;*/
}

div#maximenuck ul.maximenuck li.level1.last {
    padding : 0 0 0 0;
    margin: auto;
   /* background : url(../images/separator2.png) top right no-repeat;*/
}

/* first level item title */
div#maximenuck ul.maximenuck li.level1 > a span.titreck,
div#maximenuck ul.maximenuck li.level1 > span.separator span.titreck {
	font-size: 11px;
    color : #003D65;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}

/* first level item description */
div#maximenuck ul.maximenuck li.level1 > a span.descck {
    color : #ccc;
}

/* first level item link 
div#maximenuck ul.maximenuck li.parent.level1 > a,
 div#maximenuck ul.maximenuck li.parent.level1 > span /* {
    background : url(../images/maxi_arrow0.png) bottom right no-repeat;
} */

/* parent style level 0 
div#maximenuck ul.maximenuck li.parent.level1 li.parent {
    background : url(../images/maxi_arrow1.png) center right no-repeat;
} */

/* first level item hovered */
div#maximenuck ul.maximenuck li.level1>a:hover span.titreck,
div#maximenuck ul.maximenuck li.level1>span:hover span.titreck {
    color: #666666;
}


/**
** items title and descriptions
**/

/* item title */
div#maximenuck span.titreck {
    color : #FFFFFF;
    /*display : block;*/
    text-transform : none;
    font-weight : normal;
    font-size : 11px;
    line-height : 50px;
    text-decoration : none;
	/*height : 17px;*/
    min-height : 45px;
    float : none !important;
    float : left;
}

/* item description */
div#maximenuck span.descck {
    color : #c0c0c0;
    display : block;
    text-transform : none;
    font-size : 10px;
    text-decoration : none;
    height : 12px;
    line-height : 12px;
    float : none !important;
    float : left;
}

/* item title when mouseover */
div#maximenuck ul.maximenuck  a:hover span.titreck {
    color : #003D65;
}

/**
** child items
**/

/* child item title */
div#maximenuck ul.maximenuck2 li a.maximenuck,
div#maximenuck ul.maximenuck2 li span.separator {
    text-decoration : none;
    border-bottom : 1px dashed #FFFFFF;
    margin : 0 2%;
	width: 96%;
    padding : 3px 0 3px 0;
	clear:both;
}

/* child item block */
div#maximenuck ul.maximenuck ul.maximenuck2 {
    background : transparent;
    margin : 0;
    padding : 0;
    border : none;
    width : 100%; /* important for Chrome and Safari compatibility */
    position: static;
    overflow: visible !important;
    display: block !important;
    float: none !important;
    visibility: visible !important;
}

div#maximenuck ul.maximenuck2 li.maximenuck {
    padding : 2px 0 0 0;
    border : none;
    margin : 0 5px;
    background : none;
    display : block;
    float: none;
	/*clear:both;*/
}

/* child item container  */
div#maximenuck ul.maximenuck li div.floatck {
    background : #00529C;
    border : 1px solid #14347D;
}

/**
** module style
**/

div#maximenuck div.maximenuck_mod {
    width : 100%;
    padding : 0;
    /*overflow : hidden;*/
    color : #ddd;
    white-space : normal;
}

div#maximenuck div.maximenuck_mod div.moduletable {
    border : none;
    background : none;
}

div#maximenuck div.maximenuck_mod  fieldset{
    width : 100%;
    padding : 0;
    margin : 0 auto;
    /*overflow : hidden;*/
    background : transparent;
    border : none;
}

div#maximenuck ul.maximenuck2 div.maximenuck_mod a {
    border : none;
    margin : 0;
    padding : 0;
    display : inline;
    background : transparent;
    color : #888;
    font-weight : normal;
}

div#maximenuck ul.maximenuck2 div.maximenuck_mod a:hover {
    color : #FFF;
}

/* module title */
div#maximenuck ul.maximenuck div.maximenuck_mod h3 {
    font-size : 11px;
    width : 100%;
    color : #aaa;
    font-size : 11px;
    font-weight : normal;
    background : #444;
    margin : 5px 0 0 0;
    padding : 3px 0 3px 0;
}

div#maximenuck ul.maximenuck2 div.maximenuck_mod ul {
    margin : 0;
    padding : 0;
    width : 100%;
    background : none;
    border : none;
    text-align : left;
}

div#maximenuck ul.maximenuck2 div.maximenuck_mod li {
    margin : 0 0 0 15px;
    padding : 0;
    width : 100%;
    background : none;
    border : none;
    text-align : left;
    font-size : 11px;
    float : none;
    display : block;
    line-height : 20px;
    white-space : normal;
}

/* login module */
div#maximenuck ul.maximenuck2 div.maximenuck_mod #form-login ul {
    left : 0;
    margin : 0;
    padding : 0;
    width : 100%;
}

div#maximenuck ul.maximenuck2 div.maximenuck_mod #form-login ul li {
    margin : 2px 0;
    padding : 0 5px;
    height : 20px;
    background : transparent;
}


/**
** columns width & child position
**/

/* child blocks position (from level2 to n) */
div#maximenuck ul.maximenuck li.maximenuck div.floatck div.floatck {
    margin : -30px 0 0 180px;
}

/* margin for overflown elements that rolls to the left */
div#maximenuck ul.maximenuck li.maximenuck div.floatck div.floatck.fixRight  {
    margin-right : 180px;
}

/* default width */
div#maximenuck ul.maximenuck li div.floatck {
    width : 180px;
}

div#maximenuck ul.maximenuck li div.floatck div.maximenuck2 {
    width : 180px;
}

/* 2 cols width */
div#maximenuck ul.maximenuck li div.cols2 {
    width : 360px;
}

div#maximenuck ul.maximenuck li div.cols2>div.maximenuck2 {
    width : 50%;
}

/* 3 cols width */
div#maximenuck ul.maximenuck li div.cols3 {
    width : 540px;
}

div#maximenuck ul.maximenuck li div.cols3>div.maximenuck2 {
    width : 33%;
}

/* 4 cols width */
div#maximenuck ul.maximenuck li div.cols4 {
    width : 720px;
}

div#maximenuck ul.maximenuck li div.cols4>div.maximenuck2 {
    width : 25%;
}



/**
** fancy parameters
**/

div#maximenuck .maxiFancybackground {
    list-style : none;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}
/*
div#maximenuck .maxiFancybackground .maxiFancycenter {
    background: url('../images/fancy_bg.png') repeat-x top left;
    height : 2px;
}
*/
div#maximenuck .maxiFancybackground .maxiFancyleft {

}

div#maximenuck .maxiFancybackground .maxiFancyright {

}

/**
** rounded style
**/

/* global container */
div#maximenuck div.maxiRoundedleft {

}

div#maximenuck div.maxiRoundedcenter {

}

div#maximenuck div.maxiRoundedright {

}

/* child container */
div#maximenuck div.maxidrop-top {

}

div#maximenuck div.maxidrop-main {

}

div#maximenuck div.maxidrop-bottom {

}


/* bouton to close on click */
div#maximenuck span.maxiclose {
    color: #fff;
}

-----------------------------------------------
http://tovornik.info

Zgodovina sprememb…

boss-tech ::

V IE gledam da je širina ul ok, samo potem li elementi se ne pravilno raztegnejo do roba ul - desni rob
http://tovornik.info

Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 4 … 23 24 25 26 )

Oddelek: Izdelava spletišč		1297331003 (55152) htmltroubles
»

Prikaz strani na različni resoluciji-Joomla

Oddelek: Izdelava spletišč		151810 (1538) kr?en
»

meni razporejen po celotni dolžini

Oddelek: Izdelava spletišč		72005 (1873) XzupanX
»

Wampserver in Firefox

Oddelek: Izdelava spletišč		61714 (1594) jonystar
»

CSS problemi (strani: 1 2 )

Oddelek: Izdelava spletišč		519330 (7129) nuuush

Več podobnih tem