I'm making a section of a web-page with the div operator. So I've got one big box with smooth edges and some content, but I'd like to create a button inside this box and I would like to use the div attribute again. How would I style this new button through CSS? Obviously I would override my old button if I'd simply change the div attributes in the CSS.
Here's the code so far:
<!DOCTYPE HTML>
<html>-
<header>-
<title> Derps</title>-
<link type="text/css" href="stylesheet.css" rel="stylesheet"/>
</header>
<body>
<div>
<h1> Derpsps</h1>
<p>
Random text for my website
</p>
<img src="picture1.jpg " class="left"height="300" />
<img src="logo-thingymchee.png" class="right"height="100" />
</div>
</body>
</html>
CSS:
div{
height:800px;
width: 1300px;
border-color:#6495ED;
background-color:#BCD2EE;
border-width:2px;
border-style: solid;
border-radius:5px;
margin: auto;
text-align: center;
}
I'm guessing that what you're trying to achieve is this:
<!-- this is your original box -->
<div class="container">
<!-- this will be the button -->
</div>
</div>
</div>
By adding a class to the first div, you can assign a specific style to it.
You could now do this:
div.container {
height:800px;
width: 1300px;
border-color:#6495ED;
background-color:#BCD2EE;
border-width:2px;
border-style: solid;
border-radius:5px;
margin: auto;
text-align: center;
}
div div {
// Other style here
}
Or any other form of CSS.
I do recommend to use an HTML <button> instead of a <div>.
You can simply use the classes to do that.
Create another div with the class "button"
Style the div.button via CSS
HTML
<div>
<h1> Derpsps</h1>
<p>
Random text for my website
</p>
<img src="picture1.jpg " class="left"height="300" />
<img src="logo-thingymchee.png" class="right"height="100" />
<div class="button">Button</div>
</div>
CSS
div
{
height:800px;
width: 1300px;
border-color:#6495ED;
background-color:#BCD2EE;
border-width:2px;
border-style: solid;
border-radius:5px;
margin: auto;
text-align: center;
}
div.button
{
border-color:#6495ED;
background-color:#BCD2EE;
border-width:2px;
border-style: solid;
border-radius:5px;
margin: 10px auto 10px auto;
text-align: center;
padding: 10px;
width: auto;
height: auto;
display: inline-block;
}
Related
I'm at a project where I need all images within a div to be placed at the same place for an animation where I've put the images to be absolute to stack on top of each other though this interupts the rest of the code when scaling the page.
Example start -
HTML
<div class="a b">
<div class="c d">
<div class="e">
<img class="f" src="" alt="image"/>
</div>
</div>
<div class="c d">
Some content
</div>
</div>
CSS
.a {
clear: both;
padding: 0px;
margin: 0px;
width: 100%; }
.b:before,
.b:after {content:""; display: table; }
.b:after {clear:both; }
.c {
display: block;
float: left;
margin: 1% 0 1% 0%;
}
.d {
margin: 0;
padding: 0;
width: 50%;
}
.e {
position: relative;
margin: 100px auto;
width: 100%;
max-width: 640px;
height: auto;
max-height: 640px;
vertical-align: center;
}
.f {
position: absolute;
margin: 0;
padding: 0;
}
Example end -
As said this works great on fullscreen but when resizing the second class="c d" appears overlapped by the first class="c d" and I would like them to be stacked underneath eachother instead as the did before I created class="f", is there any way to do this with pure css?
to make child absolute within parent you need to wrap the child with div with position relative.
for elements with position set to relative or absolute there is no direct way to prevent them from over layering, you can prevent them by calculating left and top values.
a work around is to use a blocking div. do that wrap your absolute positioned element with normal div and set its height to a value suitable to your needs check this plunker.
note the div with .absolute-parent class
also note the div with .blocking-div class
check this plunker
https://plnkr.co/edit/dT1cC8YAY1ENYfhRvncs?p=preview
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Absolute Positioning</h1>
<div class="absolute-to-page">
to page
</div>
<div class="my-cont">
<div class="blocking-div">
<div class="absolute-parent">
<div class="absolute-to-parent">
to parent
</div>
<div class="absolute-to-parent obj-2">
object two
</div>
</div>
</div>
<div class="absolute-parent">
<p>Some other content</p>
</div>
<div>
<p>Some other content 2</p>
</div>
</div>
</body>
</html>
and the css code
/* Styles go here */
.my-cont{
border:1px solid blue;
min-height:400px;
margin-top:200px;
}
.absolute-to-page{
position:absolute;
width:40px;
height:40px;
background:green;
top:0;
}
.absolute-parent{
position:relative;
}
.absolute-to-parent{
position:absolute;
width:40px;
height:40px;
background:red;
top:0;
}
.obj-2{
left:50px;
}
.blocking-div{
height:40px;
}
I have a div with some text
<div class="jumbotron">
<h1>This is a text with class jumbotron.</h1>
</div>
And I can't find a way to remove the extra space to the right of the text (where the red arrow is).
Edit:
I would like to have the text drawn as if the width demand of 200px requires, but then have a box placed around such that the padding is correct as well, if neccessary making the box slightly smaller than required.
Result with code below:
Goal: box edge approximately where the red line is:
Edit:
text-align justify leads to the right padding, but I would like to keep the text as it is above:
Full example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<head>
<style type="text/css">
<!--
.jumbotron h1 {
margin-right: auto;
margin-left: auto;
padding: 10px;
border: 3px solid #ffffff;
width: 200px
}
body {
background-color: grey;
}
-->
</style>
</head>
<body>
<div class="jumbotron">
<h1>This is a text with class jumbotron.</h1>
</div>
</body>
Use box-sizing:border-box;
.jumbotron h1 {
margin-right: auto;
margin-left: auto;
padding: 10px;
border: 3px solid #ffffff;
width: 200px;
box-sizing:border-box;
}
I hope it will helps you.
I'm trying to get my textarea and div to be side by side and have the run button underneath but I'm not sure why it isn't working.
The output looks like this:
http://codeeplus.net/test.php
CSS:
.CodeMirror { height: 400px; width: 500px; border: 1px solid #ddd; }
.CodeMirror-scroll { max-height: 400px; }
.CodeMirror pre { padding-left: 7px; line-height: 1.25; }
#drawing { border: 1px solid #555555; float:left; width:480px; height: 400px; }
HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; width:50%; height: 50%; border: 1px solid #000000;">
<div style="float:left">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<html>
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</html></textarea>
</div>
<div style="float:left;">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<input type="button" id="run" value="Run" />
</div>
I would use two div's one to wrap around your text area and one to wrap around your other div. This way you can just use float: left; to put them both side by side :)
your code seems have many problems :), I made some changes:
remove float:left; from divs
set display:inline-block;
add clear:both tag before button
remove width:50%; and height:50% form first div
look at new HTML:
<div style="position: absolute; left: 10px; top: 10px; padding: 10px; border: 1px solid #000000;">
<div style="display:inline-block; vertical-align:top;">
<textarea align="left" style="overflow:auto;" id="demotext" name="textarea">
<head>
<title>Learning HTML</title>
</head>
<body>
<p>I'm learning HTML! This is my first line of code!</p>
</body>
</textarea>
</div>
<div style="display:inline-block">
<div id="drawing" style="text-align:left;padding:10px;"></div>
</div>
<div style="clear:both"></div>
<input type="button" id="run" value="Run" />
</div>
jsFiddle is here
You should use display: inline-block; property here, on the elements you want to align in one line:
div {
display:inline-block;
}
Online Example
The default value for div tags is display:block;
EDIT 1:
I have checked your page. The div that you're trying to align in is not aligning, because your parent div has width:50% and it's simply not fitting in there. Try changing it to, let's say width:100% and see that it really works!
EDIT 2:
Also remember, that if you use padding, as you apparently do on your page, it's affecting the actual (final) width of the element. For example, if you set the parent div's width: 1200px and padding as padding:10px;, then the actual div's size will be 1160px, cutting 10px on each side.
I am creating a web site. This has a menu bar on the left and main content next to it. The problem is if the main part contains something else than plain text then its size has an effect of the starting point of the left menu bar.
Here is a screenshot:
http://kepmegosztas.com/img/0c8013ce70931aad975d91fd76c1cb3e/site.png
"The logged in as user1" should start at the top, but its starting point depends on the size (height) of the textarea. The textarea is resizeable, when I resize it, the content of the left menu "follows" it.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sitestyle.css" /><title>
cim1
</title>
</head>
<body>
<div id="header">
cim2
</div>
<div id="wrapper">
<div id="row">
<div id="left">
<span>
Logged in as user1<br/>
</span>
<a href="login.php?logout=1">
(logut)<hr/>
</a>
<a href="index.php?year=2013&month=1">
2013 - 1<br/>
</a>
<a href="index.php?year=2012&month=12">
2012 - 12<br/>
</a>
</div>
<div id="main">
<span>
<form action="/site/blog.php" method="post">
<textarea name="the_text" class="blog">
</textarea>
<input value="Submit" type="submit" /></form>
</span>
</div>
</div>
</div>
</body>
</html>
CSS:
html
{
height: 100%;
}
body
{
background-color: #aabbaa;
margin: 0px;
height: 100%;
}
div#header
{
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: gray;
background-color: #889988;
}
div#wrapper
{
display: table;
table-layout: fixed;
width: 80%;
height: 90%;
margin-left: auto;
margin-right: auto;
}
div#row
{
display: table-row;
}
div#left
{
display: table-cell;
width: 20%;
background-color: #ccddcc;
/*list-style: none;*/
}
div#main
{
display: table-cell;
background-color: white;
}
textarea.blog
{
resize: both;
overflow: auto;
}
Do you have any suggestion how to solve this?
Thanks in advance,
Tamas
Your textarea inside of div#row. Separate it and it will be ok.
As another solution fix div#left to top and set it's height
you set div#left and div#main as a table-cell, so they must have the same heights when resizing. As solution you can add extra layer inside div#left and set position for it, or you can try to span vertical cells, but didn't think that is work on layers. Maybe setting of vertical-align for div#left is kind
I have the code as follows:
<html>
<head>
<style type="text/css">
#container {
}
#content {
}
a {
color:#0083cc;
}
body {
margin:0px; padding:0px;
}
#header {
height:20px;
background-color:#fb0000;
}
#section1 {
margin: 0 auto;
width: 50%;
border-style: none none solid solid;
border-width: 5px;
border-color: red;
margin-top: 100px;
}
</style>
<title></title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div style="float: left;">
Test
</div>
<div id="section1">
<div style="text-align:center;">
<h1 style="color:#999999;">Please <a>Login</a> or <a>Signup</a></h1>
</div>
</div>
</div>
</div>
</body>
</html>
I am wondering if it is possible to have the border that #section1 has continue all the way to the bottom of the #header? As well, would it be possible to have the div containing "test" floated so it appears immediately to the left of #content1's border?
I am fine with completely restructuring the page, so fire away.
Thanks in advance!
Edit: Actually, what I am looking to accomplish is much like facebook's current layout.. Just simpler. So that could be used as a reference to see the end goal
Why don't you set padding-top: 100px; instead of margin-top: 100px; in your #section1 style? If you want to have the Test content appear lower as well, you can achieve this with another rule like e.g. #content div:first-child { margin-top: 100px; }.