-2
嘿，我正在做一个网站，最近看到一些问题与CSS。我的标题div效果很好，也许是因为我用100％的宽度对它进行了样式设计。但我的主要和副主席的大小似乎有一些问题。我的主ID有1288像素的宽度，当我检查它时，它的方式更少。我希望我的side div是页面宽度的30％，主div是页面的70％。我怎样才能做到这一点？Css div会搞砸
这里是我的PHP代码：
<?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>
，这里是我的CSS代码：
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 {
}
这是“为什么我的代码不工作？”问题，请更具体。 -1 – KDOT
我希望我的边div是页面宽度的30％，主div是页面的70％。我怎样才能做到这一点？ –
指定以像素为单位的宽度可能会在您的显示器上以您的分辨率工作，但是当有人使用不同的屏幕分辨率查看它时会发生什么情况？提示：这很糟糕！尝试使用百分比设置宽度.. #main {width：100％;} #side {width：30％;} etc ... –