i want to style div elements in code below differently without changing class names , in fact every element with class named "right" represent one side of a hollow rectangle , so i want every elemnt have the same width and height but different position(vertical horizental ...) .
i know that i can give different id or class name to each div element but i want to know if there is anyway to style elements with same class names differently??
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
<div class='right'></div>
</div>
</body>
</html>
.right:nth-child(1) {
background: red;
}
.right:nth-child(2) {
background: yellow;
}
...
https://www.w3schools.com/CSSref/sel_nth-child.asp
Inside each div tag You can add a new div tag with different class name or id. It won't make any difference in your output.
#container{
display: grid;
grid-gap: 20px;
grid-template-columns: 1fr 2fr;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id='container'>
<div class='right'>one</div>
<div class='right'>two</div>
<div class='right'>three</div>
<div class='right'>four</div>
</div>
</body>
</html>
Related
Good day
I have a question;
I am using Bootstrap 5 for my website, which works fine yet,
I want Bootstrap using the whole page and not like 80%; (See image)
<head>
<title>Home</title>
<link rel=stylesheet href='./style/stylesheet.css'>
<link rel=stylesheet href='./style/bootstrap.css'>
</head>
<body>
<div class='container'>
<div class='row'>
<div class='col-12 navbar'>
<h1 class='title'>Welcome Reno</h1>
</div>
</div>
</div>
</body>
And my css;
body {
background-image: url(https://i.imgur.com/M8Jq9IE.jpg);
background-size: cover;}
.title {
color: whitesmoke;}
.navbar {
background-size: cover;
background-color: gray;}
So how can I make it so Bootstrap uses the whole page and not have those wierd border/margins?
Thanks
Bootstrap's default .container class has a fixed width that changes depending on the breakpoint.
If you want the container to be full width at all breakpoints, you need to use .container-fluid.
If you want to have the full width of the container depending on the breakpoint, you need to use one of the Responsive Container classes like container-sm or container-lg.
In your case, it would be:
<head>
<title>Home</title>
<link rel=stylesheet href='./style/stylesheet.css'>
<link rel=stylesheet href='./style/bootstrap.css'>
</head>
<body>
<div class='container-fluid'>
<div class='row'>
<div class='col-12 navbar'>
<h1 class='title'>Welcome Reno</h1>
</div>
</div>
</div>
</body>
Check out the documentation for more information:
https://getbootstrap.com/docs/5.0/layout/containers/
I am coding an HTML drumpad program like this, I'm styling it with CSS:
#drumpad-container {
display: grid;
}
<!DOCTYPE html>
<html>
<head>
<title>Drumpad</title>
<link rel='stylesheet' type='text/css' href='..\CSS\drumpad.css'/>
<script src='..\JS\drumpad.js'></script>
</head>
<body>
<div id='drumpad-container'>
<div id='drumpadQ'>'Q'</div>
<div id='drumpadW'>'W'</div>
<div id='drumpadE'>'E'</div>
<div id='drumpadA'>'A'</div>
<div id='drumpadS'>'S'</div>
<div id='drumpadD'>'D'</div>
<div id='drumpadZ'>'Z'</div>
<div id='drumpadX'>'X'</div>
<div id='drumpadC'>'C'</div>
</div>
</body>
</html>
My goal is to have the <div> tags in a grid, 3 x 3.
The HTML works, but the CSS doesn't!
Someone please help?!
You need to specify the grid template. In this case, you only need grid-template-columns.
#drumpad-container {
display: grid;
grid-template-columns: repeat(3, auto);
}
<!DOCTYPE html>
<html>
<head>
<title>Drumpad</title>
<link rel='stylesheet' type='text/css' href='..\CSS\drumpad.css'/>
<script src='..\JS\drumpad.js'></script>
</head>
<body>
<div id='drumpad-container'>
<div id='drumpadQ'>'Q'</div>
<div id='drumpadW'>'W'</div>
<div id='drumpadE'>'E'</div>
<div id='drumpadA'>'A'</div>
<div id='drumpadS'>'S'</div>
<div id='drumpadD'>'D'</div>
<div id='drumpadZ'>'Z'</div>
<div id='drumpadX'>'X'</div>
<div id='drumpadC'>'C'</div>
</div>
</body>
</html>
See A Complete Guide to Grid for more information.
You need to define the columns and rows of #drumpad-container.
See this page for more help with CSS Grid. https://css-tricks.com/snippets/css/complete-guide-grid/
#drumpad-container {
display: grid;
grid-template-columns: auto auto auto; /* or 33% 33% auto; or 25% 50% 25%; etc. */
grid-template-rows: auto auto auto;
}
You can achieve this by set #drumpad-container{display:grid;grid-template-columns: auto auto auto}
For more information visit this link enter link description here
#drumpad-container {
display: grid;
grid-template-columns: auto auto auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Drumpad</title>
<link rel='stylesheet' type='text/css' href='..\CSS\drumpad.css'/>
<script src='..\JS\drumpad.js'></script>
</head>
<body>
<div id='drumpad-container'>
<div id='drumpadQ'>'Q'</div>
<div id='drumpadW'>'W'</div>
<div id='drumpadE'>'E'</div>
<div id='drumpadA'>'A'</div>
<div id='drumpadS'>'S'</div>
<div id='drumpadD'>'D'</div>
<div id='drumpadZ'>'Z'</div>
<div id='drumpadX'>'X'</div>
<div id='drumpadC'>'C'</div>
</div>
</body>
</html>
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
Hey there!, first post here, can anybody tell me why this won't work? i've simplified my code to the maximum. The thing is that it will work if i make my browser window smaller than 1200px.
The problem with your page is that you did not put in place all the structure required by bootstrap's grid support: columns should be in rows, rows should be in containers, see the bootstrap documentation for details.
The following modification of your code works as intended:
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/c\
ss/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey" class="container">
<div class="row">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</div>
</body>
</html>
(Technically the problem occurs because the "col-lg-12" class makes the div containing the "hello" a float, so it is no longer contained in the div with the grey background, and then the grey div has height 0, so isn't visible.)
Add the position or height attribute to the div
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body>
<div style="background-color:grey;position:absolute">
<div class="col-lg-12">
<h1>hello</h1>
</div>
</div>
</body>
</html>
How do you keep the div fixed and other div on the next "line" but not under it when the page first loads.
http://codepen.io/alexdj1983/pen/raQrEK
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
</head>
<body>
<div id="header"><h1></h1></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
You need to move the tops of the elements below the header, in your code pen you can do this by adding:
top: 150px;
position: relative;
to the style of the other elements. I would personally prefer to wrap the two floated divs in another div as a container and set top on that, but it isn't really necessary.
See here:
http://codepen.io/anon/pen/dPQqGb
I'm trying to decide no the best way to make a side-by-side column-like layout using CSS and divs.
For some reason when I use display: inline-block;, if the aggregate width of the column-divs is equal to 100%, the last div wraps onto the next line. However, if I use floating divs, this doesn't happen, even with identical width.
For example, the two divs in this example appear on different lines:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
display: inline-block;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<!-- This div is on the second line -->
<div class="column">
Column 2
</div>
</body>
</html>
But in this example they don't:
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://rleahy.ca/reset.css" />
<style type="text/css">
.column { width: 50%;
float: left;
}
</style>
</head>
<body>
<div class="column">
Column 1
</div>
<div class="column">
Column 2
</div>
</body>
</html>
Using both Chrome and IE8.
Why does this happen?
inline-block respects white-space in your markup. try:
<div class="column">Column 1</div><div class="column">Column 2</div>
see what happens