html - Switched to django now tab label width is stretching to tab content width... Hard to explain -
this hard explain length of tab stretching according page content width. happened after implemeneted made gui django framework here pic: 
this pic represents desired , how before started using django. can see tab length matches length of title, want: 
here html:
<!doctype html> {% load staticfiles %} <html> <head> <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> <title> {% block title %} {% endblock %} </title> </head> <body> <header> <img src="{% static 'images/arda.png' %}" alt="logo"> <h1>autism resource database alaska<h1> </header> <!--<ul class="header_links"> <li> <a href="{% url 'home' %}">home</a> </li> <li> <a href="{% url 'about' %}">about</a> </li> <li> <a href="{% url 'contact' %}">contact</a> </li> <li> <a href="{% url 'faq' %}">faq</a></li> </ul>--> <ul class="tabs"> <li> <input type="radio" checked name="tabs" id="tab1"> <labels for="tab1">resource browser</labels> <div id="tab-content1" class="tab-content animated fadein"> <div id="searchbar"> <form action="/search/" method="get"> <input type="text" name="q" placeholder="enter query..." class="search"> <input type="submit" value="search database" class="button"> </form> </div> <div id="sidebar"> <form action="/result/" method="get"> <p> demographics </p> <input type="checkbox" name="male" value="selected" id="g_male" /> <label for="g_male">male</label><br> <input type="checkbox" name="female" value="selected" id="g_female" /> <label for="g_female">female</label><br> <input type="checkbox" name="age1-3" value="selected" id="age1-3" /> <label for="age1-3">age 1-3</label><br> <input type="checkbox" name="age3-18" value="selected" id="age3-18" /> <label for="age3-18">age 3-18</label><br> <input type="checkbox" name="age18+" value="selected" id="age18+" /> <label for="age18+">age 18+</label><br> <p> disorders </p> <input type="checkbox" name="autism spectrum disorder" value="selected" id="asd" /> <label for="austism spectrum disorder">autism spectrum</label> <br> <input type="checkbox" name="fetal alcohol syndrome" value="selected" id="fas" /> <label for="fas">fetal alcohol</label><br> <input type="checkbox" name="pervasive developement disorder" value="selected" id="pdd" /> <label for="pdd">pervasive development</label><br> <input type="checkbox" name="aspergers syndrome" value="selected" id="aspergers" /> <label for="aspergers">aspergers syndrome</label><br> <input type="checkbox" name="cognative development disorder" value="selected" id="cdd" /> <label for="cdd">cognative development</label><br> <p> behaviors </p> <input type="checkbox" name="sleep" value="selected" id="sleep" /> <label for="sleep">sleep</label><br> <input type="checkbox" name="safety home" value="selected" id="safety_home" /> <label for="safety_home">safety home</label><br> <input type="checkbox" name="safety public" value="selected" id="safety_public" /> <label for="safety_public">safety public</label><br> <input type="checkbox" name="safety travel" value="selected" id="safety_travel" /> <label for="safety_travel">safety travel</label><br> <input type="checkbox" name="repetition" value="selected" id="repetition" /> <label for="repetition">repitition </label><br> <input type="checkbox" name="aggression" value="selected" id="aggression" /> <label for="aggression">aggression</label><br> <input type="checkbox" name="communication" value="selected" id="communication" /> <label for="communication">communication</label><br> <input type="checkbox" name="nonverbal" value="selected" id="nonverbal" /> <label for="nonverbal">nonverbal</label><br> <input type="checkbox" name="sensory" value="selected" id="sensory" /> <label for="sensory">sensory</label><br> <input type="checkbox" name="meltdown" value="selected" id="meltdown" /> <label for="meltdown">meltdown</label><br> <input type="checkbox" name="anxiety" value="selected" id="anxiety" /> <label for="anxiety">anxiety</label><br> <input type="checkbox" name="change" value="selected" id="change" /> <label for="change">change</label><br><br> <input type="submit" value="submit" /> </form> </div> <!-- closing sidebar tag --> {% if error %} {% endif %} </div> <!-- closing searchbar tag--> <div id="wrapper"> <main> {% block content %} {% endblock %} </main> </div> <!-- closing wrapper tag --> <footer> <a href="{% url 'admin:index' %}">admin login</a> </footer> </div> </li> <li> <input type="radio" name="tabs" id="tab3"> <labels for="tab3">help</labels> <div id="tab-content3" class="tab-content animated fadein"> <form style="width: 100%"> </div> </li> </ul> </body> </html> here css:
body { width: 100%; height: 100%; margin-left: 0px; margin-top: 0px; border-style: solid; border-top-width: 12px; border-top-color: #207cca; font-family: arial, verdana, sans-serif; color: #111111; } /* beginning of header contents */ header { height: 80px; font-family: impact; color: white; font-size: 46px; background-color: #207cca; box-shadow: 0px 8px 10px #888888; margin-top: 0px; margin-bottom: -20px; } header h1 { margin: 0; padding-top: 7px; font-size: 45px; font-family: impact, arial, sans-serif; color: white; overflow: hidden; white-space: nowrap; } header img { height: 70px; width: 100px; float: left; padding: 10px 10px 0px 5px; } /* end of header contents */ #searchbar { padding-top: 13px; padding-left: 8px; padding-bottom: 13px; } #wrapper { width: 1000px; background-color: #eee; border: solid 2px #adadad; margin-top: 15px; } /* beginning of sidebar content styling */ #sidebar { width: 240px; float: left; padding-left: 8px; padding-right: 8px; margin-top: 10px; font-family: arial, helvetica, sans-serif; } /* end of sidebar */ /* beginning of main content*/ main { width: ; margin-left: 250px; padding: 5px; background-color: #ffffff; min-height: 800px; } main p { font-size:12px; font-family: helvetica, sans-serif; color: #555555; } main h2 { font-family: arial, helvetica, sans-serif; color: #333333; } main h3 { font-family: arial, helvetica, sans-serif; color: #333333; } .overview_heading { font-weight:bold; } main img { display: block; margin-left: auto; margin-right: auto; padding-bottom: 10px; } footer { text-align: center; } .tabs input[type=radio] { position: absolute; top: -9999px; left: -9999px; } .tabs { float: none; list-style: none; position: relative; padding: 0; margin-top: 18px; margin-left: 115px; } .tabs li{ float: left; } .tabs labels { box-shadow: 0px 4px 10px #888888; display: block; padding: 10px 20px; border-radius: 2px 2px 0 0; color: #207cca; font-size: 20px; font-weight: normal; font-family: impact, verdana, sans-serif; background: rgba(255,255,255,0.2); cursor: pointer; position: relative; -webkit-transition: 0.5s ease-in-out; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; } .tabs labels:hover { background: lightgrey; top: 0; } [id^=tab]:checked + labels { background: #207cca; color: white; top: 0; } [id^=tab]:checked ~ [id^=tab-content] { display: block; } .tab-content{ z-index: 2; display: none; text-align: left; line-height: 140%; padding-top: 0px; background: white; color: black; -webkit-animation-duration: 1s; -o-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s; } .search { width: 158px; margin-left: -8px; margin-top: 50px; box-shadow: 0px 4px 10px #888888; padding: 10px 15px; background: rgba(50, 50, 50, 0.2); border: 0px solid #dbdbdb;} .button { box-shadow: 0px 4px 10px #888888; padding: 8px, 15px; left:-10px; border: 6px solid #207cca; background-color: #207cca; color: #fafafa;} .button:hover { background-color:#fafafa; border-color:#207cca; color:#207cca;} /* end of main content */ it has got simple. please because have been trying hours.
i think miss li closing tag in html
<ul class="tabs"> <li> <input type="radio" checked name="tabs" id="tab1"> <labels for="tab1">resource browser</labels> <div id="tab-content1" class="tab-content animated fadein"> </li>
Comments
Post a Comment