I'm learning CSS and so far managed after many many hours to create a simple layout but still dont know how to center things (text,block,whatever) inside a float:left div. Here's the code i just hope someone might be able to help as im gonna go nuts in a very short time!
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
#container {
/* */
border: 1px solid;
/* */
padding-top: 10px;
margin-left:auto;
margin-right:auto;
width: 980px;
height: auto;
}
#content {
display: inline-block;
}
#content .left {
display: inline-block;
border: 1px solid;
padding-left: 5px;
padding-top: 10px;
width:773px;
float:left;
}
#content .right {
display: inline-block;
padding-top: 10px;
width:200px;
float:right;
}
#content .inside-left {
text-align: center;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div class="left">
<!-- i need every inside-left class center aligned -->
<div class="inside-left">
<table border="1">
<tr>
<td>center align</td>
<td>damn it</td>
</tr>
</table>
</div>
</div>
<div class="right">
test
</div>
</div>
</div>
</body>
edit: oh and why the ** css is so hard to understand? is it just me??
Just a tiny CSS modification makes a huge difference:
Change this:
#content .inside-left {
text-align: center;
margin-left: auto;
margin-right: auto;
}
To this:
#content .inside-left, #content .inside-left > * {
text-align: center;
margin-left: auto;
margin-right: auto;
}
See the difference: http://jsfiddle.net/8JfNF/1/
This CSS selector, #content .inside-left > *, selects all of the direct children (not grandchildren) of the .inside-left and applies the same CSS to them.
CSS is not tough, i think this is simplest logical thing in world of web...try and learn from some good website..
and there is some suggestion for you..
better use class instead of id
always write 4 basic table property width, cellpadding, cellspacing and border
to horizontal centered the things inside a td use text-align:center; to make vertical center write vertical-align:middle
to learn CSS tricks see my bookmarks...this will surely helps u
Related
Right now I'm coding a menu that has a two column layout. This is the code.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>replit</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</body>
</html>
CSS:
.stockapps {
background-color: #111;
float: left;
width: 5%;
height: 100%;
}
.stockapps :after {
content: "";
display: table;
clear: both;
}
.stockapps img{
width:100%;
display: inline;
vertical-align: top;
}
.main {
float: left;
padding: 2%;
width: 91%;
overflow: hidden;
}
The issue is that the stockapps div tag is not filling the whole screen with height instead opting to only fill the area the children objects take up.
I have tried using the clear-fix and setting overflow to hidden but neither seem to fix the issue. Its likely some beginner mistake as CSS is not my strong suit
This fiddle showcases the issue.
You can wrap stockapps and main divs into a container div
Style this container as below
I used background color for stockapps div to show you its height
.container {
display: flex;
align-items: stretch;
/*Set height as you want, you can use height in px */
height: 100vh;
}
.stockapps {
/* used background-color to show you how much height it takes*/
background-color: #999;
/*You can ignore width if it's not convenient for your desired final output */
width: 50%
}
<div class="container">
<div class="stockapps">
<img src="icons/eShop.svg">
<img src="icons/sverse.svg">
</div>
<div class="main">
<p>
Hello!
</p>
</div>
</div>
If I understand you correctly, you need to create a 2-column layout for your menu.
To achieve this layout, I would wrap the <div class="stockapps"> and <div class="main"> into another <div> with class of manu-wrap and add this CSS styles:
.menu-wrap {
display: flex;
justify-content: space-between;
}
I would then remove the float properties and you should have a working 2-column layout.
You can find more about display: flex here.
I want to place a logo image between two headers and have it resize and move so that it stays relative to the text.
body{
background-color: black;
}
.logotext{
padding: 25px;;
font-family: abnes;
color:white;
}
#h1{
float: left;
}
#h2{
float: right;
}
#logo{
float:inherit;
}
<head>
<link rel="stylesheet" href="main.css">
<body>
<div class=logotext>
<h1 id="h1">Huron</h1>
<h1 id="h2">Interplanetary</h1>
<img id=logo src="https://dummyimage.com/600x600/000/fff">
</div>
</body>
</head>
I want it to look like this: Huron 0 Interplanetary
(where 0 is the logo image).
Simple question, but I'm learning.
I added justify-content: space-between to your .logotext so it stays centered when ever you zoom in or out. make sure to also add display: flex otherwise justify-content won´t work.
.logotext{
padding: 25px;
font-family: abnes;
color:white;
display: flex;
justify-content: space-between;
}
Hope this is what you are looking for. You can look on here for a full explanation on flexbox
For some reason, the first word of my paragraphs keep appearing above my blockquotes. My code structure looks something like this:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
<!-- CSS style to put div side by side -->
<style type="text/css">
.container {
width:600px;
height:190px;
}
#ab-box {
float:left;
width:360px;
height:160px;
background-color:white;
}
#tb-box {
float:left;
width:180px;
height:160px;
background-color:white;
}
</style>
</head>
<body>
<div class="container">
<div id="ab-box">
<blockquote style="border: 2px solid #666; padding: 10px; background-color: #fff; width: 240px"> <b>AUTHOR:</b>
<br><br>{{NAME}}</blockquote>
</div>
<div id="tb-box">
<blockquote style="border: 2px dotted #666; padding: 10px; background-color: #fff; width: 240px"> <b>PUBLISHED:</b>
<br><br>December 1993</blockquote>
</div>
</div>
<div>
<p>Dear *|SUBSCRIBER|* - <br /><br />We're happy to have you onboard!</p>
</div>
</body>
This isn't a perfect representation... But the word "Dear" in the paragraph below keeps appearing above the blockquotes for some reason. The rest of the paragraph moves just fine and is perfectly in line - it's just that one word. And if I duplicate the paragraph, I get the same issue. Please assist; thank you in advance!
close your "style" tag
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
</style>
Hello and welcome to StackOverflow. Your code has two errors: first of all, you opened the style tag two times, firstly after the head open and then after the comment
<!-- CSS style to put div side by side -->
Second, the comment is an Html comment, not a Css one: inside Style tags you cant use html comments
<!-- blabla -->
Instead, you have to write them like this
body {
background: red;
height: 100%;
/*
width: 100%;
display: flex;
Multi line comment
*/
}
Here you can find a more detailed example.
https://www.w3schools.com/css/css_comments.asp
Cheers!
These are the instructions
1. Make a div, give it a class of 'feature_set_1_1'
Make a set of 3 divs inside the above div, sitting side by side, that together take up 75% of the width of the body
Add appropriate ids or classes to perform the following operations:
-Give your divs a set height
-Put 5% of space between the 1st and 2nd div via any method you wish
-Put 5% of space between the 2nd and 3rd div without further altering the 2nd div
-The three divs should all be on the same line, side by side
I must use class that assigned to parent div to make this and I can't find a way to make this work using class feature_set_1_1.
This is my code so far:
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Layout_1</title>
<meta charset="UTF-8">
<style>
.feature_set_1_1 {
display: inline-flex;
background: blue;
width: 75%;
height: 100px;
}
#1_1 {
margin: 5%;
display: inline-block;
}
#1_2 {
margin-right: 5%;
display: inline-block;
}
#1_3 {
display: inline-block;
}
</style>
</head>
<body>
<div class="feature_set_1_1">
<div id="1_1">Figure1</div>
<div id="1_2">Figure2</div>
<div id="1_3">Figure3</div>
</div>
</body>
</html>
Try following it may helps you.
.feature_set_1_1 {
display: inline-flex;
background: green;
width: 75%;
height: 100px;
}
#div_1 {
margin-right: 5px;
width:25%;
display: inline-block;
background:yellow !important;
}
#div_2 {
margin-right: 5px;
display: inline-block;
width:25%;
background:pink !important;
}
#div_3 {
display: inline-block;
width:25%;
background:red !important;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Layout_1</title>
<meta charset="UTF-8">
</head>
<body>
<div class="feature_set_1_1">
<div id="div_1">Figure1</div>
<div id="div_2">Figure2</div>
<div id="div_3">Figure3</div>
</div>
</body>
</html>
Hey beginner coder here:
I'm trying to achieve this: http://i.imgur.com/aVawhET.png with this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uppgift 5</title>
<style>
body{
margin-top: 25px;
margin-left: 15px;
width: 100%;
height: 100%;
}
#text{
width: 90%;
display: inline-block;
}
#text p{
word-break: break-all;
}
#image{
height: 500px;
width: 5%;
display: inline-block;
background-image: url("bakgrund.jpg");
background-repeat: repeat-y;
}
</style>
<div id="container">
<div id="text">
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
</div>
<div id="image">
</div>
</div>
but I fail and get this result: http://imgur.com/ac0nSqz what am I doing wrong? I've tried things like adding minus margin values. Why is it jumping down?
The correct answer is:
#text,
#image { vertical-align: top; }
The reason is because inline-block elements are, by default, aligned by their baselines - so the bottom of both div's are in line with each other - meaning that their will be a space at the top of the shorter div when it's placed in line with a taller div to make the bottoms of these divs line up.
CSS
body{
margin-top: 25px; ///Remove this
}
Add margin-top: 0 in body tag