I am in the process of making my own website, and I am making it out of pure HTML. I encountered in the making of the page, as I will describe below.
Here's my code for reference :-
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.sideDiv {
border: 1px outset black;
background-color: white;
text-align: center;
width: 120;
height: 400;
}
</style>
<style>
.mainDiv {
border: 1px outset black;
background-color: white;
text-align: left;
width: 400;
height: 300;
}
</style>
<img src="AyushLogo.png" alt="logo" height="9.2%" width="9.2%" style="float:left">
<br>
<a><button>About Me</button></a>
<a><button>Games</button></a>
<a><button>My Blog</button></a> <br><br>
<hr>
</head>
<body>
<div class="sideDiv">
</div>
<div class="mainDiv">
<p>Hi,<br>My name is Ayush Bhatt.<br><br>I love to code and remake old games. You can view some of my games by clicking on the 'Games' button on the top bar.</p>
</div>
</body>
</html>
The output looks like this :-
I wanted the tag with the "mainDiv" properties to appear at the side of the one with the "sideDiv" properties, but it just doesn't want to.
PS : I want to use only HTML as long as possible
An important thing about <div> tags is that they are known as "block-level" elements, which in particular means that they always start on a new line and take up the full width available, regardless. With this in mind,
writing
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
should result in a div with class sideDiv and width as defined in the class, and then a new div with class mainDiv started on a new line, as block-level elements do by default, though note that this is simultaneously also because the div with class sideDiv takes up the remaining width on the page as a block-level element (though its content width is as described in the class, it being a block-level element is a bit like it "reserving" the rest of the width even though its content only uses the amount defined), so the next element (block level or inline) can only start on at least the next line.
If you want to circumvent this behavior, there are many ways to do it. One is by using an external tool like bootstrap, as pointed out by another answer, but my favorite is to simply use flex box. This can be done for your code in this way
<div style="display: flex; flex-direction: row;">
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
</div>
A method that directly overwrites the block-level property would be to set the style display: inline-block; for both divs, to prevent either from starting on a new line or taking up the whole available width by default. (Just one isn't enough, if you only set it on the first one, the second still starts on a new line by default, and if you only set it for the second one, the first still takes up all available width by default). However, this causes the element to be treated completely as an inline element besides the fact that block-level height and width can be applied, and can be strange/difficult to maneuver as a result. It is often easier to just use a flex box. Code for this would be
<div class="sideDiv" style="display: inline-block;"></div>
<div class="mainDiv" style="display: inline-block;">
...
</div>
However, note that <p> is also a block-level element, so directly substituting in your original code in the mainDiv div would still cause it to skip a line before displaying. Again, it is usually easier, more modern, and better looking to just use a flex box.
Edit: Added the detail about block-level elements taking up all available width, and fixed the incorrect initial method that changed the display property to overwrite the block-level property by setting display: inline;. This can work, but it will ignore the heights and widths of the <div>s.
try using bootstrap , it deals with layout perfectly , here is an example :
<div class="container">
<div class="row">
<div class="col-md-6">
this is the left section
</div>
<div class="col-md-6">
this is the right section
</div>
</div>
</div>
for more details check :
https://getbootstrap.com/docs/5.0/layout/grid/
NOTE : you will need to include bootstrap and jQuery libs , check for online tutorial to start using bootstrap
Related
I want to make a resume header just like this
Expected Output
I have tried this HTML code with less CSS to achieve this task
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1 align="center">
<img src="http://gocartoonme.com/wp-content/uploads/cartoon-avatar.png"
width="10%" height="10%" align="middle">Sam<br clear="all">
</h1>
</body>
</html>
But I could not achieve that resume header.
The expected output would be a Resume header just like the image mentioned above
You can do it with CSS fairly easily, using properly structured HTML:
HTML:
<div id="bio-intro">
<div id="img-container">
<img src="" alt="treybake Frontend Developer" />
</div>
<div id="bio-info">
<h1>TreyBake</h1>
<h3>Frontend Developer</h3>
</div>
<div id="bio-contact">
<p>
e: someemail#domain.com <br/>
t: 0112233445566<br/>
w: domain.com
</p>
</div>
</div>
CSS:
#bio-intro {
background: lightgray;
width: 100%
}
#img-container, #bio-info, #bio-contact {
display: inline-block;
width: 33%
}
#img-container {
border: 1px solid;
border-radius: 100%;
max-width: 150px
}
We essentially break up each column into it's own container. We set these containers to a 1/3 of the parent width and set the display to inline-flex to make a row. Everything else is simple CSS to create a bordered image (no image, hence you see the ALT attribute value on the image - replace with an image and you'll see a much better result).
Working Example
I recommend flex-box.
You can assign "display:flex" to a element within which all your children are container, i.e., all the elements you are trying to align based on your requirements.
From there, flex-box provides numerous other features which you can explore here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Flex-box not only easy to implement, but it is also responsive. This may not be too important in your specific case, but something additional benefit to keep in mind while styling elements.
<li class="flex-container">
<ul class="flex-item">Your image</ul>
<ul class="flex-item">Your Name/Title</ul>
<ul class="flex-item">Your contact</ul>
</li>
.flex-container {
display: flex;
justify-content: space-between;
}
https://jsfiddle.net/snehansh/fm3etpsu/5/
I have the following HTML structure:
<div id="wrapper">
<div id="some-id"></div>
"this is some texxt"
<div id="some-id-2"></div>
</div>
How can I remove the text with CSS?
Can't think of a very good way to do so, but
#wrapper {
font-size:0;
}
Would work.
Notice, that if the other two divs have text anywhere inside them, you will need to redefine new font-size for them, since it will be overwritten.
Not sure if this will work on every browser, but you should give it a shot.
#wrapper {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
It is accessible, and has much better performance than changing the font size.
More here - Replacing the -9999 font
Its not sexy - but it works - and I am assuming that you want the two divs, but not the text in the middle. If you can only affect the content with CSS (and not javascript / jquery) - then you could try the following. Force the background of the second div to be white and move it up by 1em using position relative / top -1em. That way it will cover over the offending text.
As I said - not sexy and I do NOT recommend using this - far better to find a way of actually modifying the content of the #wrapper div.
#some-id-2{
background:white;
display:block;
position:relative;
top:-1em}
<div id="wrapper">
<div id="some-id">text content 1</div>
"this is some texxt"
<div id="some-id-2">text content 2</div>
</div>
I recommended you to use jQuery code to remove the text definitely from the client side, because may be you will have some issues with some browsers.
If you decide to use jQuery you can place the following code in your page:
$(document).ready(function(){
var divContent = $("#wrapper").find("div");
$("#wrapper").html(divContent);
});
if the wrapper div can contain more HTML tags for example:
<div id="wrapper">
<div id="some-id">aaaa</div>
"this is some texxt"
<div id="some-id-2">bbbb</div>
<p>Hello world</p>
</div>
You can combine HTML tags in the find jQuery function by separate them by comma:
$(document).ready(function(){
var divContent = $("#wrapper").find("div,p");
$("#wrapper").html(divContent);
});
This is more save and clean
I haven't done HTML and CSS for a while so I may be forgetting something, but for some reason a "style" tag with the "text-align" property set isn't working even in the simplest context. I'm about to show you the whole, entire file that I have but my problem is only in the two comments I have. Don't worry about the other stuff; it's for a little passion project I'm working on.
So here is the whole file. I have a lot of stuff in it that isn't relevant nor important; just focus on the code in the two comments.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>JSON Generator</title>
<link rel="stylesheet" href="web_mod.css"></link>
</head>
<body bgColor="#E3E3E3">
<!--Start here-->
<span style="text-align: center">Coded by AnnualMelons</span><br>
<!--Finish here-->
<span style="color: red; background-color: #2CE65A">Use this generator to generate the code required to create a JSON message.<br>
Fill in the blanks to generate the code. The generator will guide you through it as you go along. Have fun!</span>
<script>
</script>
</body>
</html>
The "Coded by AnnualMelons" part is supposed to be in the center but it's not. At least for me it's not.
I know that the other part of the file isn't relevant but I figured I might as well show you as it may be an external problem.
I'm sure I'm just making a silly mistake because I haven't done this for a while, but it's not working... so yeah. I'm using Firefox as my web browser in case that helps.
Thanks!
The <span> Element is, by default, an "inline" element. Meaning unlike block level elements (<div> <h1> <p> etc.) the span only takes up as much horizontal space as its content.
text-align: center IS working, but you're applying it to an element that doesn't have a width greater than its content (as all block elements do).
I recommend either changing the span to a <p> element, or specifying the display: block property on your span.
Here's a JSfiddle to demonstrate that both a <span> with display: block; text-align: center and a <p> with text-align: center; achieve the same effect.
Hope that helps!
Use a p or div rather than a span. Text is an inline element and so is a span. For text-align to work, it must be used on a block level element (p, div, etc.) to center the inline content.
example:
<div style="text-align: center">Coded by AnnualMelons</div><br>
Use this in style
margin-left: 50%;
example-
<span style="margin-left: 45%;">Centered Text</span>
.span {
text-align: center;
width: -webkit-fill-available;
}
This Worked for me and the text inside my span tag is now aligned to the center.
I am using Joomla to create a website at the moment and I am having problems with a certain module getting padding applied to it. The problem is with Joomla you have classes for the modules that I cant seem to override. The layout is as follows :
<div id="rt-page-surround">
<div class="rt-container">
<div class="rt-container-bg">
<div id="rt-drawer">
<div id="rt-header">
<div class="rt-grid-6 rt-alpha">
<div class="rt-grid-6 rt-omega">
<div class="thumbnail_scroller">
<div class="rt-block">
<div class="module-content">
<div id="jdv_iscroll122_wrap" class="jdv_iscroll_wrap " style="width: 620px; height: 110px; ">
<div id="jdv_iscroll122_inner" class="jdv_iscroll_inner horizontally" style="width: 32766px; height: 110px; left: 0px; ">
</div>
The module I am trying to modify is thumbnail_scroller, the problem is it is getting 15px of padding from rt-block. If I set rt-block to padding:0px this gives the desired affect to thumbnail_scroller but it also applies the zero padding to everything else on the page as the rt-block class is shared with numerous other elements on the page (this is the way the template is coded by the author). What I want to do is apply zero padding to rt-block but only for the thumbnail_scroller module.
I have tried
.thumbnail_scroller {padding:0px !important}
but this seems to do nothing, anyone any ideas on this one ? :-)
div.thumbnail_scroller div.rt-block {
padding:0;
}
This specifically targets divs with the rt-block class that are inside a div with the thumbnail_scroller class.
You can be hyper-specific by trying something within your CSS like:
div.thumbnail_scroller div.rt-block {
padding: 0px;
}
That directive will then apply only to a div of class thumbnail_scroller IF it sits within a div container of class rt-block.
(Edited for div order - re-read your question.) {:¬)
I have a question about a problem, of which I originally thought, that it would be fairly simple to solve. But apparently it is not - at least not with only CSS.
This is the basic situation:
<div id="wrapper" style="height:90%;width:410px;background:#aaaaaa;">
<div id="top" style="margin:5px;width:400px;background:#ffffff;">
</div>
<div id="content" style="margin:5px;width:400px;background:#ffffff;">
</div>
</div>
I have a wrapper div that fills up 90% of the screen height and two inner divs. The first div "top" contains some varying elements. The second div "content" should fill out the remaining space of the wrapper div.
So far, I haven't found a way to set the div "content" to fill up the remaining space - even if I would know the exact height of the div "top" as I only know the relative height of the wrapper div.
Thus, I would be happy to learn of a method to either the div "content" to fill up the remaining space or how to mix relative and absolute sizes (i.e. height:100%-100px).
There is currently no cross-browser solution to achieve what you're trying with div elements and CSS. You can however get the behavior you want with the tried and true method of using a table instead.
<html>
<head>
<style type="text/css">
#wrapper {
height:90%;width:410px;background:#aaaaaa;border-spacing:5px;
}
#wrapper td {
padding:0;vertical-align:top;
}
#top {
background:#ffffff;
}
#content {
height:100%;background:#ffffff;
}
</style>
</head>
<body>
<table id="wrapper" role="presentation">
<tr>
<td id="top">Top</td>
</tr>
<tr>
<td id="content">Content</td>
</tr>
</table>
</body>
</html>
EDIT:
It appears I stirred a nest of hornets with my answer. There seems to be a near-religious following of people who say using tables for layout is bad. In many cases that is absolutely true, however there are situations where a table will do what CSS cannot. This is one of those situations, where a CSS alternative is on the horizon, but most browsers do not support it yet. It is up to the site designer to decide whether he wants to have a layout with cross-browser functionality now, or use a pure CSS layout with its limitations that may become easier to maintain in the future.
Your HTML code is really wrong:
don't use comma's after attributes
don't use inline CSS, put all CSS in a stylesheet and load the stylesheet in your HTML page
CSS syntax is: propertie: value; example: width: 10px; not: width=10px
To use 100% - 100px you can use CSS3 calc, but this feature has less browser support. You can use JS to make a sort of calc function.
There is no cross-browser way to get the content div to fill all available space with CSS, but it is fairly easy to make things look as if it did:
<html>
<head>
<style type="text/css">
#wrapper {
width:400px;height:90%;border-style:none solid;border-color:#aaaaaa;border-width:5px;background:#ffffff;
}
#top {
border-bottom: 5px solid #aaaaaa;
}
#content {
}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">
Top
</div>
<div id="content">
Content
</div>
</div>
</body>
</html>
This should be sufficient for most situations, unless you want to use something like an onmouseover handler on the content.