-2
Hey ich mache eine Website und habe vor kurzem einige Probleme mit CSS gesehen. Mein Header Divs funktioniert vielleicht, weil ich es mit Breite 100% gestylt habe. Aber mein Haupt- und Seiten-Div scheint Probleme mit der Größe zu haben. Ich habe eine Breite von 1288px auf meiner Haupt-ID und wenn ich es überprüfte, ist es viel weniger. Ich möchte, dass meine Seite div 30% der Breite der Seite und die Hauptdiv 70% der Seite beträgt. Wie kann ich das machen?Css div wird vermasselt
Hier ist mein PHP-Code:
<?php
$tjener = "localhost";
$brukernavn = "root";
$passord = "";
$database = "searchengine";
$connection = mysqli_connect($tjener,$brukernavn,$passord,$database) or die("could not connect");
$connection->set_charset("utf8");
$output = "";
//collect
if(isset($_POST["q"])) {
$searchq = $_POST["q"];
$searchq = mysqli_real_escape_string($connection,$searchq);
$searchq = htmlspecialchars($searchq);
$query = mysqli_query($connection,"SELECT * FROM products WHERE vareNavn LIKE '%$searchq%' OR desci LIKE '%$searchq%'");
$count = mysqli_num_rows($query);
if($count == 0) {
$output = "There was no search results.";
} else {
while ($row = mysqli_fetch_array($query)) {
$id = $row['vareNr'];
$vareNavn = $row['vareNavn'];
$desci = $row['desci'];
$output .= "<h1>" . $vareNavn . "</h1><p> " . $desci . "</p><br/>";
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<script>
function active(){
var Search = document.getElementById("search");
if(search.value == "Search..."){
search.value = "";
search.placeholder = "Search...";
}
}
function inactive(){
var Search = document.getElementById("search");
if(search.value == ""){
search.value = "Search...";
search.placeholder = "";
}
}
</script>
</head>
<body>
<div id="header">
<div id ="searchBar">
<form action="main.php" method= "post">
<input type="text" id="search" name="q" placeholder="" value="Search..." autocomplete="off" onMouseDown="active();" onBlur="inactive();"/><input type="submit" id="searchButton" value="Search"/>
</form>
</div>
</div>
<div id="main">
<div id="oppstart">
<h1>Newly commenced webstore</h1>
</div>
<div id="klokkeMer">
<h2>Watches</h2>
</div>
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
<?php
print($output);
?>
</div>
<div id="side">
</div>
</body>
</html>
und hier ist mein CSS-Code:
body {
font-family: arial;
}
h1 {
margin: 20px 0px 0px 0px;
padding:0;
}
p {
margin: 0;
padding:0;
}
#header {
width:100%; /* Full lengde*/
background-color:#1F2A40;
height:100px; /* 150px */
position:absolute;
top:0px;
left:0px;
}
#search {
border: 1px solid #1F2A40;
border-right:none;
font-size:16px;
padding:10px;
outline:none;
width:700px;
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-bottomleft:10px;
border-top-left-radius:10px;
border-bottom-left-radius:10px;
}
#searchButton {
border: 1px solid #1F2A40;
padding:10px;
font-size:16px;
background-color:#ff9933;
font-weight:bold;
color:#1F2A40;
cursor:pointer;
outline:none;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topright:10px;
-moz-border-radius-bottomright:10px;
border-top-right-radius:10px;
border-bottom-right-radius:10px;
}
#searchButton:hover {
background-color:#F5870A;
}
#main {
position:absolute;
top:100px;
background-color:red; // change to white when website is done
width:1288px;
height:800px;
left:300px;
}
#side {
position:absolute;
top:100px;
background-color:orange; // change to white when website is done
width:300px;
left:0px;
height:800px;
}
#searchBar {
position:absolute;
width:800px;
top:8px;
left:250px;
/* border:1px solid red; */
}
#div1 {
position:absolute;
width:100px;
top:200px;
left:300px;
border:1px solid black;
height:100px;
background-color:purple;
}
#div2 {
}
#div3 {
}
Dies ist ein "Warum funktioniert mein Code nicht?" Frage, bitte sei genauer. -1 – KDOT
Ich möchte meine Seite div 30% der Breite der Seite und die Hauptdiv zu 70% der Seite sein. Wie kann ich das machen? –
die Breite in Pixeln kann auf Ihrem Monitor bei Ihrer Auflösung funktionieren, aber was passiert, wenn jemand es mit einer anderen Bildschirmauflösung ansieht? Tipp: Es ist schlecht! Versuchen Sie, Breiten mit Prozentwerten einzustellen .. #main {width: 100%;} #side {width: 30%;} etc ... –