I am new to web-designing styles and css. I read that usage of tables for layout is a bad practice. Hence I tried to create this layout using <br\> , div and float.
Problem :
Once, <br\> is applied, I can't render the upper part, (similar to once \n is printed in console, we cant go to the upper line).
So, could any one provide an alternative way of designing the page, without using <table> and <br> tags.
Looks like a perfect example usage of a grid system.
Without using a grid system, you can just use float: left for each of the div and it should be OK.
Here is simple example for doing so,
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>StackOverFlow</title>
<style type="text/css">
.content{
width:150px;
height:100px;
border:1px solid blue;
}
.content .text{
display:block;
border:1px solid red;
}
</style>
</head>
<body>
<div class="content">
<div class="text">
text here
</div>
<div class="text">
another text here
</div>
<div class="text">
yet another text here
</div>
</div>
</body>
</html>
Code Explanation
What i did is wrap text div inside content parent div and assign fixed width and height to parent div.
Now for child div i just used display:block and see the result. You do not need to use <br/> display:block; will do it for you.
Now what is the meaning of display:block; so it just tell browser to allow that particular DOM to take whole width of the parent div.
By adding css to DIV's you can get some great layouts (i.e the three column style you're looking for here) , try this aticle to get you started:
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm
Related
I have a webpage that is a template from a company that design it for us and we have an admin panel which we can add content to the page.
This normally works fine but there is a specific page that doesn't look great. It has a lot of text on it and we want the background to be a dark brown colour, a gold border around it and the text in bold.
When we are adding content we create a content block and in this, we can add html, I have recently done a very basic course in html. I know normally the page will link to a CSS file which will provide the page style. But I also know you can add the <style> tag in and then add CSS directly into the HTML.
This is maybe a long shot but does anyone with any knowledge of template website know if it would work to add the css in this way just to change the background colour and give it a border? I presume I would need to use something like google dev tools to find out what the section names are to identify them in the CSS? According to dev tools the section I want to modify looks like this.
<div id="content">
<div class="cs-content-row">
Thanks
If you have very limited control, e.g. you can't add a <style> tag to the <head> or use a custom stylesheet, you can also resort to using inline style, and style individual elements using the style attribute.
See example of use;
<div style="background:brown; border:1px solid yellow; color:white; font-weight:bold; padding:30px;">Your text here</div>
The pros are it overrides the default styling easily, but the downside is you have to re-write code for every element you want to custom style, and if you changed your mind about the colour, you'll have to edit every instance it was used..
You mean normal css into html like this?
<html lang="en">
<head>
<style>
body{
background:red;
}
#content{
width:200px;
height:200px;
background:blue;
}
.cs-content-row{
width:100px;
height:100px;
background:green;
}
</style>
</head>
<body>
<div id="content">
<div class="cs-content-row">
</body>
</html>
You can use the style tag but you have to add it between the <head> tags of your page.
If your admin panel allows you to update that part of HTML you can do something like that :
According to your HTML description
<head>
<style>
#content{
/* css targeting the div with id attribute equals to 'content' */
}
.cs-content-row{
/* css targeting the div with class attribute equals to 'cs-content-row' */
}
</style>
</head>
Don't know if it has a normal explanation or if it is some kind of extrange behaviour, but i have faced the next issue in HTML:
I have the following paragraph:
<p>
You have <strong>32</strong> items
</p>
Nothing so special and works fine.
(Result: You have 32 items)
But if i add the following style:
<p>
You have <strong>32</strong> items
</p>
<p style="height:20%;">
You have <strong>32</strong> items
</p>
The number in "strong" looses the spaces before and after it.
(Result: You have32items)
Why is it?
P.D: It behaves the same with "b" tag.
More info:
I'm testing in Chrome and Firefox with a IIS server (both fails).
I couldn't reproduce it in Fiddle, so it could be something that i'm missing in my code...
More info:
here is the complete scss:
$header_height: 10%;
$footer_height: 20%;
$body_height: 100% - ($header_height+$footer_height);
$container_frame_padding: 0.5em;
html{
height:100%;
body.vcAllowOverflowContent{
height:100% !important;
.vcPopupContainer{
height:100%;
.vcPopupTitle{
height:$header_height;
display:flex;
justify-content:center;
font-size:$bigger_font_size;
padding:$container_frame_padding;
}
.vcPopupBody{
height:$body_height;
border: solid black 1px;
overflow:auto;
padding:$container_frame_padding;
}
.vcPopupFooter{
height:$footer_height;
}
}
}
}
and here a more complete html:
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MutipleDelete</title>
#Styles.Render("~/Content/Bootstrap")
<link rel="stylesheet" type="text/css" href="~/Content/vcPopups.min.css" />
</head>
<body class="vcAllowOverflowContent">
<div class="vcPopupContainer">
<p class="vcPopupTitle">
¿Desea borrar estos <strong>#Model.Count</strong> pacientes?
</p>
<div class="vcPopupBody">
...
</div>
<div class="vcPopupFooter">
...
</div>
#Scripts.Render("~/Scripts/Jquery")
#Scripts.Render("~/Scripts/Bootstrap")
</div>
</body>
</html>
As you can see i'm using Bootstrap and Razor.
If i remove the "vcPopupTitle" class, the paragraph behaves normally.
It's strongly recommended (since HTML 5) that, if possible (even if not), use span class="foo" and then apply font-weight:bold; to this class, instead using html tags for text formatting.
And you cannot set width of text on %, must use px, em or rem, see the example below:
p{font-size:1.2rem;}
p.ps{font-size:1.6rem;}
span.foo{font-weight:bold;}
div.container{height:86px; overflow:auto; border:0.1rem solid black;}
.section1{height:40%; border:0.3rem solid blue;}
.section2{height:60%; border:0.3rem solid red;}
<div class="container">
<div class="section1">
<p>
You have <strong>32</strong> items
</p>
</div>
<div class="section2">
<p class="ps">
You have <span class="foo">32</span> items
</p>
</div>
</div>
Take care about tag default properties and for which job are each one.
P tag is a paragraph and cannot take height property "as is". it will take 100% of the container on width, and the height it need. If you want to limit the height of a p tag, you have to limit the container of this p instead force limit to self P tag.
Note that if you try to force a container to a height and the content overflow its parent container, it will not take visible effect due to font-size (on this case) so you'll need to use another font size (and better specify it as rem, that means realtive em).
Ok, problem solved.
It has to be with the "display: flex;" and "justify-content:center;" styles.
I was applying those styles to a "p" tag, so the elements within it (text and strong) aligned to the center and spaces between them were removed.
Solution:
<div class="vcPopupTitle">
<p>
You have <strong>32</strong> items
</p>
</div>
Now the "flex" display will work on the paragraph and not on its elements.
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.
Here is what I'm trying to do.
I want layout with three columns. Lets call them left, middle and right column. I can't figure out what to do so when the content of main increase the height of left and right columns to increase also ?
I'd suggest checking out this link for a great example of a 3 column liquid layout. Just view the source for the example of the HTML and CSS. He also provides examples of various other layouts (see the tabs at the top of the page).
Here is an excellent website: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts that has a whole bunch of different layouts that are all CSS based.
HTML:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3 Columns</title>
</head>
<body>
<div class="container">
<div class="left">
<h3>Left Column</h3>
</div>
<div class="center">
<h3>Center column</h3>
/div>
<div class="right">
<h3>Right column</h3>
</div>
</div> <!-- /container -->
</body>
</html>
CSS:
.container {width: 800px; border:1px solid red; overflow:auto; }
.left {width: 250px; border:1px dashed green; float:left}
.center {width: 250px; border:1px dashed green; float:left}
.right {width: 250px; border:1px dashed green; float:left}
See the demo here:
http://jsfiddle.net/z2SLL/1/
I would strongly recommend against using the <table> element simply because for semantic reasons, we are not talking about displaying tabulated data.
Instead, exploit the display properties using values like "table", "table-row" and "table-cell". Here is a demo: http://jsfiddle.net/teddyrised/DLaCW/20/. You can see that although the content of each column varies, their overall height follows that of the tallest <div>.
Maybe the faux columns technique is what you need. Check it out here, here and here.
If you need it to be liquid or with no images (for whatever reason) then you might have to use some javascript like this example or you can check this weird example.
Anyway, with the little information there's not too much to offer because there's a lot of variables and different solutions.
Unfortunaly this site we're developing has to be IE6 compatible. It contains a horizontal block style menu, but there's still one more problem with IE6.
I have the following code:
<html>
<head>
<style type="text/css">
a {
display: block;
width: 0px;
background-color: red;
}
</style>
</head>
<body>
This is a anchor tag
</body>
</html>
Because of the spaces, it wraps every word on a new line. What do I need to do if I want it on a single line only?
Thanks!
Add this css on the a element:
white-space: nowrap
Have you tried popping your anchor into a span or div?
Well, don't set its width to 0 would be the cross-browser proper approach.
Use float: left instead, if you want the anchor to be displayed in block mode but not allocate 100% width.
When you use floats like that, you also need to make sure you clear them, to make them occupy space in their container:
<div>
<a ... />
<a ... />
<div style="clear: both;"></div>
</div>