website 17 inc
Ik heb een rare vraag. Ik heb een site gemaakt op een laptop van 17 inc. En ik open mijn site op een laptop van 15 inc maar mijn navigatie is naar de knoppen dan. De helft van mijn menu kopt in de tekst. Mijn vraag hoe los je dit op??
grtz
Meestal is een layout wel upwards compatible, dus als hij op 1024x768 werkt, dan werkt hij ook op 1280x1024.
Je zult hem dus op minimaal 1024x768 laten werken, anders heeft de helft van de internettters er niets aan.
Als je een liquide layout hebt, kun je een min-width gebruiken zodat je layout niet vernaggeld word. Let dan wel alleen op dat je een min-width fix zult moeten gebruiken voor IE.
Gewijzigd op 01/01/1970 01:00:00 door Mitchell
/* standard elements */
html {min-height: 50%;}
* {
margin: 0;
padding: 0;
de rest heb ik ook gezonden.
/* beta - a free web template by spyka webmaster
http://www.spyka.net
*/
/* page */
html, * {
padding:0;
margin:0;
}
body {
background-color:#555555;
margin:0 auto;
font-size:1.0em;
color:#999999;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
/* headers */
h1 {
font-size:3em;
text-align:center;
padding-top:20px;
color:#ffffff;
letter-spacing:3px;
font-weight:normal;
}
h2 {
color:#5580B4;
display:inline;
padding:0 5px;
margin:5px 0;
}
h3 {
font-size:1.3em;
font-weight:normal;
color:#5580B4;
}
h4 {
background-color:#333333;
border-bottom:1px solid #222222;
padding:5px;
color:#202020;
}
/* paragraphs */
p {
margin:2px 0 15px 0;
line-height:1.3em;
}
/* links */
a {
color:#202020;
border-bottom:1px dotted #333333;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #333333;
color: #cccccc;
}
div#footer a {
color:#ffffff;
text-decoration:none;
border:none;
background-color:#233C57;
padding:4px;
}
div#footer a:hover {
border:none;
}
div#sidebar ul li a {
color:#5580B4;
text-decoration:none;
font-family:"Trebuchet MS", Verdana, Arial;
font-size:0.9em;
border:none;
padding:5px;
}
div#sidebar ul li a:hover {
background-color:#5580B4;
color:#ffffff;
}
/* lists */
ul, ol {
margin:0 0 5px 30px;
}
/* code */
code {
display:block;
border:1px solid #cccccc;
background-color:#dddddd;
padding:15px;
margin:5px;
}
/* container, header and nav */
div#container {
background-color:#333333;
width:70%;
padding:5px 5px 0 5px;
margin:60px auto 0 auto;
}
div#header {
background-image:url('images/headerbg.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#111111;
height:120px;
padding:10px;
}
div#header p {
text-align:center;
padding:0;
margin:0;
font-size:0.8em;
color:#ffffff;
}
div#nav {
background-image:url('images/navbg.jpg');
background-repeat:repeat-x;
height:50px;
border-bottom:1px solid #416C9C;
border-top:1px solid #325277;
}
div#nav ul {
float:left;
margin:0;
padding:0;
}
div#nav ul li {
display:block;
float:left;
}
div#nav ul li a {
float:left;
border:none;
padding:15px 15px 0 15px;
height:35px;
font-family:"Trebuchet MS", Verdana, Arial;
font-size:0.8em;
color:#cccccc;
text-decoration:none;
display:block;
}
div#nav ul li a:hover {
color:#ffffff;
background-color:#1D2F43;
}
div#nav form {
float:right;
margin:10px 15px 0 0;
}
div#nav form input {
border:1px solid #416C9C;
background-color:#1D2F43;
color:#ffffff;
padding:5px;
font-family:"Trebuchet MS", Verdana, Arial;
}
div#nav form input.button {
padding:3px;
}
/* content */
div#content {
padding:20px 10px 0 10px;
background-color:#444444;
}
div#page {
width:67%;
float:left;
}
div#sidebar {
width:28%;
float:right;
}
div#sidebar p {
padding:3px 5px;
color:#cccccc;
}
div#sidebar ul {
list-style:none;
margin:7px 12px;
}
div#sidebar ul li {
padding:3px 0;
}
/* footer */
div#footer {
padding:20px 5px;
background-color:#325479;
color:#ffffff;
}
div#footer p {
font-size:0.6em;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
margin:0;
padding:5px;
}
/* generic classes */
.bold {
font-weight:bold;
}
.clear {
clear:both;
}
/* standard elements */
html {min-height: 50%;}
* {
margin: 0;
padding: 0;
}
a {color: #FF0;}
.color {
color: #F00;
font-weight: bold;
}
a {geel: #FF0;}
.geel {
color: #FF0;
font-weight: bold;
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
div#container {
background-color:#333333;
width:70%;
padding:5px 5px 0 5px;
margin:60px auto 0 auto;
min-width: 960px;
}
background-color:#333333;
width:70%;
padding:5px 5px 0 5px;
margin:60px auto 0 auto;
min-width: 960px;
}
Probeer dat eens.
Mitchell schreef op 24.04.2009 18:06:
Probeer dat eens.
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
div#container {
background-color:#333333;
width:70%;
padding:5px 5px 0 5px;
margin:60px auto 0 auto;
min-width: 960px;
}
background-color:#333333;
width:70%;
padding:5px 5px 0 5px;
margin:60px auto 0 auto;
min-width: 960px;
}
Probeer dat eens.
nu loopt er niets meer door elkaar. Nu kan je de tekst goed lezen. Bedankt daarvoor. Zou je som ook weten hoe je navigatie goed kunt zetten waarmee alle menus op 1 lijn staan?
het werkt alleen maar in google crome niet in internet explorer
toch al bedankt nu kan je alles goed lezen :d
Gewijzigd op 01/01/1970 01:00:00 door nick
je moet de ul een float mee geven en je a een display:block mee geven. Die hoeft niet gefloat te worden. En die float kan dus weg.
het probleem is nu echter, een gefloat element zoals je <li> wordt gefloat, op zich niet erg, maar daarna geef je alsnog een display block mee. Dit hoeft niet. haal die display block dan ook weg. Wat ik ook zou doen, is je ul een overflow hidden mee geven. dit is erg ongebruikelijk, want wanneer je inzoomt, verdwijnen er items, maar op die manier kan de layout niet meer rare dingen doen. wellicht is het ook handig om de hoogtes aan je li en a mee te geven. Zo heb je ook speling in de opmaak ervan.
/* page */
html {min-height: 100%;}
* {
margin: 0;
padding: 0;
}
body {
background-color:#555555;
margin:0 auto;
font-size:1.0em;
color:#999999;
font-family:Geneva, Arial, Helvetica, sans-serif;
}
/* headers */
h1 {
font-size:3em;
text-align:center;
padding-top:20px;
color:#ffffff;
letter-spacing:3px;
font-weight:normal;
}
h2 {
color:#5580B4;
display:inline;
padding:0 5px;
margin:5px 0;
}
h3 {
font-size:1.3em;
font-weight:normal;
color:#5580B4;
}
h4 {
background-color:#333333;
border-bottom:1px solid #222222;
padding:5px;
color:#202020;
}
/* paragraphs */
p {
margin:2px 0 15px 0;
line-height:1.3em;
}
/* links */
a {
color:#202020;
border-bottom:1px dotted #333333;
text-decoration:none;
}
a:hover {
border-bottom:1px solid #333333;
color: #cccccc;
}
div#footer a {
color:#ffffff;
text-decoration:none;
border:none;
background-color:#233C57;
padding:4px;
}
div#footer a:hover {
border:none;
}
div#sidebar ul li a {
color:#5580B4;
text-decoration:none;
font-family:"Trebuchet MS", Verdana, Arial;
font-size:0.9em;
border:none;
padding:5px;
}
div#sidebar ul li a:hover {
background-color:#5580B4;
color:#ffffff;
}
/* lists */
ul, ol {
margin:0 0 5px 30px;
}
/* code */
code {
display:block;
border:1px solid #cccccc;
background-color:#dddddd;
padding:15px;
margin:5px;
}
/* container, header and nav */
div#container {
background-color:#333333;
width:70%;
padding:5px 5px 0 5px;
margin:60px auto 0 auto;
min-width: 960px;
}
div#header {
background-image:url('images/headerbg.jpg');
background-repeat:no-repeat;
background-position:center center;
background-color:#111111;
height:120px;
padding:10px;
}
div#header p {
text-align:center;
padding:0;
margin:0;
font-size:0.8em;
color:#ffffff;
}
div#nav {
background-image:url('images/navbg.jpg');
background-repeat:repeat-x;
height:50px;
border-bottom:1px solid #416C9C;
border-top:1px solid #325277;
}
div#nav ul {
float:left;
margin:0;
padding:0;
}
div#nav ul li {
display:block;
float:left;
}
div#nav ul li a {
float:left;
border:none;
padding:15px 15px 0 15px;
height:35px;
font-family:"Trebuchet MS", Verdana, Arial;
font-size:0.8em;
color:#cccccc;
text-decoration:none;
display:block;
}
div#nav ul li a:hover {
color:#ffffff;
background-color:#1D2F43;
}
div#nav form {
float:right;
margin:5px autopx 0auto 0auto;
}
div#nav form input {
border:1px solid #416C9C;
background-color:#1D2F43;
color:#ffffff;
padding:5px;
font-family:"Trebuchet MS", Verdana, Arial;
}
div#nav form input.button {
padding:3px;
}
/* content */
div#content {
padding:20px 10px 0 10px;
background-color:#444444;
}
div#page {
width:67%;
float:left;
}
div#sidebar {
width:28%;
float:right;
padding:20px 10px 0 10px;
}
div#sidebar p {
padding:3px 5px;
color:#cccccc;
}
div#sidebar ul {
list-style:none;
margin:7px 12px;
}
div#sidebar ul li {
padding:10px 0;
}
/* footer */
div#footer {
padding:20px 5px;
background-color:#325479;
color:#ffffff;
}
div#footer p {
font-size:0.6em;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
margin:0;
padding:5px;
}
/* generic classes */
.bold {
font-weight:bold;
}
.clear {
clear:both;
}
a {color: #FF0;}
.color {
color: #F00;
font-weight: bold;
}
a {geel: #FF0;}
.geel {
color: #FF0;
font-weight: bold;