To make a div look like a square, you need to ensure that its width and height are equal. In your CSS, you’ve set the width and height of #box based on the class it has, which is a good approach. However, there are a couple of issues in your CSS and HTML that need to be addressed:
-
ID vs. Class: You are using
id="box"multiple times in your HTML. Remember that IDs should be unique within a document, so you should use classes instead if you want to apply the same styling to multiple elements. -
Selectors: Your CSS selectors are incorrect for targeting elements with classes. Instead of
#box .smalland#box .big, you should use.smalland.bigdirectly to target elements with those classes.
Here’s a corrected version of your CSS and HTML:
HTML:
htmlHTML>
<html lang="en">
<head>
<title>A Pagetitle>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet" />
head>
<body>
<div id="header">
<div id="search">
<form>
<div class="box text">
<input type="text" placeholder="Search" />
div>
<div class="box small">
<input type="image" src="" alt="submit" />
div>
form>
div>
<div id="menu">
<a href=""><div class="box big">div>a>
<a><div class="box small"><img>img>div>a>
<a><div class="box small"><img>img>div>a>
<span id="notifications">span>
div>
div>
<br />
<div class="box big">
div>
body>
html>
CSS:
cssbody {
font-family: 'Prompt', sans-serif;
background: #707070;
}
#header {
background: #e2ecf2;
opacity: 0.87;
border-radius: 30px;
height: 60px;
width: 1000px;
position: fixed;
left: 50%;
top: 25px;
transform: translateX(-50%);
}
.box {
outline: 3px;
outline-style: solid;
outline-color: #d7d7d7;
}
.box.small {
width: 35px;
height: 35px;
}
.box.big {
width: 50px;
height: 50px;
}
#header #search {
margin-left: 37px;
}
#header #search input {
float: left;
margin-left: 20px;
}
This should make your div elements look like squares. If you still have issues, please let me know!
المزيد من المعلومات
بالطبع! لجعل الـdiv تبدو مربعة في CSS، يجب أن تكون قيمتي width و height متساويتين. في الكود الذي قمت بمشاركته، يبدو أنك تقوم بتعيين عرض وارتفاع العناصر بناءً على الفئة التي تحملها العناصر (small أو big)، وهذا صحيح. ومع ذلك، هناك بعض التعديلات التي يمكن أن تقوم بها لتصحيح الكود:
-
استخدام الـClass بدلاً من الـID: يجب استخدام الفئات (
class) بدلاً من الهويات (id) إذا كنت ترغب في تطبيق نفس النمط على عدة عناصر. -
المحددات: يجب استخدام المحددات الصحيحة في CSS لاستهداف العناصر التي تحمل فئات. بدلاً من
#box .smallو#box .big، يجب استخدام.smallو.bigمباشرة.
هنا الكود المصحح:
HTML:
htmlHTML>
<html lang="en">
<head>
<title>A Pagetitle>
<link type="text/css" rel="stylesheet" href="css/main.css" />
<link href="https://fonts.googleapis.com/css?family=Prompt" rel="stylesheet" />
head>
<body>
<div id="header">
<div id="search">
<form>
<div class="box text">
<input type="text" placeholder="Search" />
div>
<div class="box small">
<input type="image" src="" alt="submit" />
div>
form>
div>
<div id="menu">
<a href=""><div class="box big">div>a>
<a><div class="box small"><img>img>div>a>
<a><div class="box small"><img>img>div>a>
<span id="notifications">span>
div>
div>
<br />
<div class="box big">
div>
body>
html>
CSS:
cssbody {
font-family: 'Prompt', sans-serif;
background: #707070;
}
#header {
background: #e2ecf2;
opacity: 0.87;
border-radius: 30px;
height: 60px;
width: 1000px;
position: fixed;
left: 50%;
top: 25px;
transform: translateX(-50%);
}
.box {
outline: 3px;
outline-style: solid;
outline-color: #d7d7d7;
}
.box.small {
width: 35px;
height: 35px;
}
.box.big {
width: 50px;
height: 50px;
}
#header #search {
margin-left: 37px;
}
#header #search input {
float: left;
margin-left: 20px;
}
بهذا يجب أن تظهر العناصر على شكل مربعات. إذا كان لديك أي استفسارات أخرى، فلا تتردد في طرحها!
