I'm not an experienced html coder, all of it was done without any professional help so the results look quirky.
The web site: www.cakery.co.il/beta
I have float and expand problems (as Dreamweaver states) - when I enter my site and try to resize the window, the top (blue) ribbon and the bottom ones are cut off and look weird.
How can I fix this?
For example, this is the top ribbon code in the css:
#blue_decoration {
height: 85px;
background-image: url(_images/top_stripe.png);
}
I'd appreciate your help.
Thank you
It's hard to exactly see what the problem is without seeing the rest of what's going on but I can nevertheless give some pointers.
I'll PM the link if you like, but you can as easily copy paste the following to see for yourself:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#blue_decoration {
height: 85px;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png');
}
#bottom_blue_decoration {
height: 30%;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/a/aa/Air_Force_Good_Conduct_Medal_ribbon.png');
}
</style>
</head>
<body>
<header id="blue_decoration"> Hello World</header><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<footer id="bottom_blue_decoration"> don't collapse me! </footer>
</body>
</html>
You might notice that it repeats across the screen without many problems. However, there are no positions related to the styling as such; rather it is dependent on content not to collapse. It might be better, to say, specify top and bottom positioning. Another thing is that you are probably reusing ids - which should, strictly speaking, be used only once on a given page. This is easy enough to fix - just specify that piece of styling as a class (using a dot instead of a hash) and call it using the keyword class instead of id.
Try experimenting using non-absolute values for the background size, but instead responsive percentages. A significant question is: do you want any content to cover this background? If you want it to be an image without any content you may ultimately be better off using an <img> tag...
Related
I'm building a photography site using a builder called "photodeck" for a business.
The issue comes that the builder doesn't allow for me to create a background behind the menu and logo, so I have to do this through editing the theme CSS and HTML - I'm a coding rookie and after a lot of experimentation I cannot get it to work.
Codepen link: https://codepen.io/gknowl/pen/PeJbOE (For both CSS and HTML)
HTML (So I could post the codepen link) :
<pd-page>
<pd-block id="navib" class="dont_overlap">
<pd-component id="logo" type="logo_text" />
<div id="navlinks">
<pd-component id="menu" type="menu" />
<pd-component id="local" type="locale_switcher" />
</div>
</pd-block>
<pd-component id="hdtxt" type="text" class="dont_overlap" />
<div id="title_and_main_content_wrapper">
<div id="main_block">
<pd-component id="mainc" type="main_content" />
<pd-component id="commt" type="comments" />
<pd-component id="searc" type="search" drawer="duration:0.3,rotate_alt_content:90,init_state:closed,alt_content_pos:center,alt_content:,effect:slide_from_right" />
</div>
</div>
<pd-block id="footer" class="reserved_height dont_overlap">
<pd-component id="fttxt" type="text" />
<pd-component id="links" type="external_links" />
</pd-block>
<pd-component id="pwrdb" type="poweredby" />
</pd-page>
Picture: https://imgur.com/Fg62kt9 (The part above the green bar I'd like to have a light grey background)
Bonus: If anyone can help me out with making the logo bigger as well that would be a great help, the builder limits the size to the size pictured
I apologise if this is too basic, or if this is far too obvious - however I'm completely stuck.
Well your builder HTML markup is rendering in codepen so I am just gonna try to give you suggestions where you can make changes to get the desired result.
For making the logo bigger. Add increased width and height in this class. For responsiveness also change the width for same class in different media queries as well.
#ws_page #component_logo {
width: //As per need;
height: //As per need
}
For nav background colour try in this:
#ws_page #block_navib {
background: #ccc;
}
I created a <div> element and I'm going to use below css style withing the <div> element.
#girls {
background-image: url("girl.gif");
}
Here is my HTML <div> element (This element contains in index.html page):
<div id="girls">
<p>
<b>Girls chat:</b> at the lounge, we're committed to providing you, our guest, with an exceptional
experience every time you visit. Whether you're just stopping by to check in on email over an elixir,
or are here for an out-of-the-ordinary dinner, you'll find our knowledgeable service staff pay attention to every
detail. If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
</div>
But when I load index page, the background image (girl.gif) doesn't show up. Anyone can help me with this?
Try this:
#girls {
background-image: url("../girl.gif");
}
I'm guessing that the css is inside that stylesheet folder, that's why you need to go up a level to access girl.gif, thus the usage of ../
<!DOCTYPE html>
<html>
<head>
<title>GIF DEMO</title>
</head>
<style type="text/css">
#girls {
background-image: url('demo.gif');
height: 200px;
width: 50%;
}
</style>
<body>
<div id="girls">Sample Text
</div>
</body>
</html>
If you are using external CSS then Change your directory path of the image & try again.
else Inline Stlying go with the sample code
image link
https://s-media-cache-ak0.pinimg.com/originals/25/81/28/258128ed71595efc9b561ed7d88b89f2.gif
Trying to set a page break in the page I'm working on but in the print preview I'm still seeing things on the page that aren't supposed to be there. Can't figure out why this isn't working.
In my css style:
.applicant-break hr {page-break-after:always;}
In my ASP.NET code...partial view of code the start tags are there:
<b>Resume</b>
<br />
<asp:Literal runat="server" ID="litResume"></asp:Literal>
<br />
<br />
<hr class="applicant-break" />
</ItemTemplate>
</asp:Repeater>
</asp:Panel>
Any help would be appreciated.
Your css needs to be
hr.applicant-break {page-break-after:always;}
EDIT:
Doing some reading on the W3Schools website, it seems this css property is meant for table elements
"Set the page-breaking behavior to always break after a table element"
EDIT:
Doing some more reading, it seems browsers do support more than the table element, however some browsers have trouble with it on HR and BR tags (Reading here)
try putting a div after the hr like so
<hr />
<div class="applicant-break"></div>
and changing your CSS to
div.applicant-break {page-break-after:always;}
So apparently I'm silly, I was trying to trust the print preview of Chrome instead of just actually printing it myself, upon printing it I see that the page break does in fact work, thanks for your assistance m.t! :)
So fair warning to anyone else reading this, while it is useful it doesn't always give you an accurate look at your print job all the time.
I've been designing websites for a while now and haven't had any complaints, surprisingly. But, there's one thing that bothers me quite a bit. I'm slow. It takes me, on average about an hour to style 1 webpage (a full webpage incl. content, images, text and so on) - and I don't know if that's how long it takes most people?
And I always run into the same problems over and over again (even though each time I use a different way, based on what I learned last time), which causes me to constantly re-align, re-adjust, re-write.
I know I'm doing something wrong, but I just don't know where anymore. When my pages are finished, they're great, but there's always some very tiny, but noticeable differences between each browser - and it really * me.
Below is HTML & CSS for a generic, empty webpage. Maybe you could be so kind as to tell me what you think is wrong with it, and how I might be able to better it?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="" />
<meta name="author" content="My Name" />
<meta name="keywords" content="sample, keywords, keyphrase" />
<meta name="description" content="A sample description." />
</head>
<body>
<div class="Wrapper">
<div class="Header">
<div class="PresentationArea">
<div class="LeftSide">
<img src="" alt="" class="" />
</div>
<div class="RightSide">
<h1>Heading</h1>
<p class="PresentationDescription"></p>
Learn More
</div>
</div>
</div>
<div class="ContentArea">
<h2></h2>
<p></p>
</div>
<div class="Footer">
</div>
</div>
</body>
</html>
CSS
/* RESET -SOME- STUFF */
*{border:0;border:none;padding:0;margin:0;}
body {
}
a {
}
p {
}
h1,h2 {
}
.Wrapper {
width: 960px;
height: 100%;
margin: 0 auto;
}
.Header {
width: 100%;
height: 31px;
}
.PresentationArea {
padding: 5px 0 0 0;
}
.LeftSide {
width: 65%;
height: 250px;
}
.RightSide {
width: 35%;
height: 250px;
}
.PresentationDescription {
}
.StyledButtonLink {
}
.ContentArea {
width: 100%;
height: 350px;
}
.Footer {
width: 100%;
height: 31px;
}
Any help is greatly appreciated
Thank you
How long to style a web page?
It all depends on what is in the page! When I assess a project to set a project price, I assign a time value of anywhere from 2 to 4 hours per page. On average, for a 10 to 20 page website, I found that allowed me enough time to develop semantically meaningful mark-up, concise and robust CSS, and integration into a content management system.
Some pages are complex and take more time, for example, image gallery pages or tables of structured data. Depending on the amount of JavaScript/jQuery or PHP/MySQL that the page might need, it could took a day or more to build a page.
In other cases, for example, biographical pages where you have a simple header, headshot/image and two paragraphs, you can easily get a set of 10 pages done in an hour.
How to speed up the mark-up process
I try to keep a consistent approach to using padding and margins. For example, I tend to use non-zero margin-bottom values for headers and paragraphs and zero out margin-tops, although others do it the other way. I also use a proper reset style sheet (see above suggested by Andrew Marshall).
I also pre-style my headers (h1 ... h6) and lists and so on so that I have a generic default typographic style that I can use as scaffolding for each site that I build.
Cross Browser Pixel Perfection
I am a great admirer of Dan Cederholm (author of Bulletproof Webdesign, Hand-Crafted CSS) and I agree with his approach that web pages just need to look good in all browsers and work properly. They don't need to be pixel perfect across all browsers. Most of my clients will not pay for the meticulous coding needed to make pages perfect across all browsers.
Having said that, I use one or two hacks to fix IE oddities now and again, but I don't get too concerned otherwise. The main thing that I look out for are block element widths (IE box model issues) that can break a float-based layout.
My HTML/CSS Framework
I tend to use a fairly generic 3 column design so I have a basic page layout and associated style sheets that I use to start all my website builds. This saves me time.
In the future, I will have more standardized 1 or 2 level menus (horizontal and vertical layouts) and some generic turn-key contact forms with client/server side validation.
Closing Comments
I am a one-person shop and I often build websites for other graphic designers. I fall on the developer end of the web professional spectrum.
I have been in business over 7 years and love the work.
I also read a lot of books on CSS and HTML, much to the despair of my immediate family.
For one you should include
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
in your HTML <head> (and also ensure that everything is actually UTF-8 encoded).
I'd recommend using a separate, "full-on" CSS reset stylesheet. You might want to look into using a CSS framework such as Blueprint or 960.gs (these usually include a reset by default).
I think it's convention to have HTML IDs and classnames be all lowercase, with hyphens (or underscores) where spaces would be.
It's a good idea to run the W3C HTML Validator on your HTML as well, this ensures that you're not doing anything that violates the HTML specification and thus reduces the potential for unexpected behavior.
Is it sometimes bad to use <BR/> tags?
I ask because some of the first advice my development team gave me was this: Don't use <BR/> ; instead, use styles. But why? Are there negative outcomes when using <BR/> tags?
The main reason for not using <br> is that it's not semantic. If you want two items in different visual blocks, you probably want them in different logical blocks.
In most cases this means just using different elements, for example <p>Stuff</p><p>Other stuff</p>, and then using CSS to space the blocks out properly.
There are cases where <br> is semantically valid, i.e. cases where the line break is part of the data you're sending. This is really only limited to 2 use cases - poetry and mailing addresses.
I think your development team is refering to <br /> in place of margin spacing. To make empty space between elements, use padding / margin styling via CSS.
Bad use of <br />:
<div>
Content
</div>
<br />
<br />
<br />
<br />
<div>
More content...
</div>
Good use of <br />:
<style>
div {
margin-top:10px;
}
</style>
<div>
Content<br />
Line break
</div>
<div>
More content...
</div>
Generally, <br/> is an indication of poor semantic HTML. The most common case is using <br/> to declare paragraph separations, which there are much better ways to do it semantically. See Bed and BReakfast.
There are occasions where it is the proper tag to use, but it is abused often enough that people adopt a "do not use" mentality as to force better semantic thinking.
What was meant by your team was probably not to use <br>s to split between paragraphs.
For example :
<p>I am a paragraph</p>
<p>I am a second paragraph</p>
is the better way to do that, because you can then easily adjust the spaces between paragraphs through CSS.
Other than that, I can not think of anything speaking against line breaks as such.
Same concept applies to why we don't use tables for layout - use tables for tables and CSS for layout.
Use <br/> for break lines in a block of text and CSS if you want to affect the layout.
Specifying the layout directly makes it difficult adapting the site for different page sizes or fonts for example.
If you do this: <BR/> <BR/>
You will get diffrent layout on different browsers.
Deeper:
If you use <BR/> just for line breaks - ok.
If you use <BR/> as a line spacer - not ok.
I will generally always set appropriate margins and padding on elements using CSS - it's a lot less messy than loads of <br />s all over the place apart from being more semantically correct.
Probably the only time I would use a <br /> in preference to the margins and padding set by CSS, even if it's not strictly technically correct, is if it was an isolated incident where slightly more space was needed. If I'd got quite a large stylesheet and it didn't seem worth setting up an additional style just for that one occurence, I may use a <br /> as a one-off.
Like most things, <br />s aren't a bad thing providing they're used correctly.
I try to write my markup in a way that it's easily readable with CSS disabled. If you're just using BRs to add spacing, it's better to use margins and padding.
<br /> should be used for line breaks only, and not to apply style to a page. For example, if you need extra space between paragraphs, give them a class and apply the extra padding to the paragraphs. Don't spread out your paragraphs with <br /><br ><br />
They are to be used to represent newlines. Nothing more. Not to fill up space like as at the average geocities site. There is however only one case wherein they may be useful for other purposes than putting a newline: to clear the floats.
<br style="clear: both;">
Don't use three or more consecutive <br>s, that's a signal you're using them for stylistic purposes and no, you shouldn't.
Some would say a single <br> is enough and instead of two you should use <p></p>, but there are situations (e.g. screenplays) in which you want to introduce a longer pause without implying a change of topic or a new period starting, like a paragraph usually does.
They're fine, if used appropriately. For instance, you shouldn't use them in lieu of <p> tags or to create spacing between elements. You're probably doing something wrong if you ever have two in a row.
Here's an example how <br> can negatively affect styling (run snippet for visuals)
(note the misaligned button and odd space on the right):
button {
width: 70px;
height: 70px;
}
#arrows {
border: solid thin red;
display: inline-block;
}
#arrows span:first-of-type {
text-align: center;
display: block;
}
#moveUp {
margin: 0;
}
/* In the current case instead of <br> use display */
/*
#arrows span:last-of-type {
display: block;
}
*/
<div id="arrows">
<span>
<button id="moveUp" value="üles">↑</button>
</span>
<button id="moveLeft" value="vasakule">←</button>
<button id="moveDown" value="alla">↓</button>
<button id="moveRight" value="paremale">→</button>
<br> <!-- note the shifted button and odd space on right -->
<span>or move with keyboard arrows</span>
</div>
In HTML (up to HTML 4): use <br>
In HTML 5: <br> is preferred, but <br/> and <br /> is also acceptable
In XHTML: <br /> is preferred. Can also use <br/> or <br></br>
So use of <br> tag is perfectly valid HTML. But use of <br> is not recommended?
Main reason why not to use <br> is because it's not semantic tag & has no content inside. Its use can be avoided like,
<p>some<br>text<p>
can be marked up without <br> as
<p>some</p>
<p>text<p>
If you are using <br> other purpose like top-spacing etc. that can be achieved via CSS margin property.