Web Design.

[Jurai]

AAAGH! HTML makes me want to travel in time and backhand everybody involved in it.

I'm working on a project, and HTML (and CSS) don't want to cooperate. Trying to set up a personal business website, and the above mentioned languages are driving me up the wall.

[Seerow]

Are you looking for help or just to vent?

Because if you want help, more information on what is actually giving you trouble will be needed.



That said, I've yet to encounter any language that made designing graphical user interfaces particularly intuitive. The closest thing is stuff like Visual Basic, where you create the GUI using a GUI (yo dawg). Those tend to come with a functionality tradeoff in terms of adding useful functionality to the elements you create (or having a lot of junky inefficient code). HTML/CSS is miles easier than trying to program a GUI in Java or C++ by hand.

[Flickerdart]

HtML and CSS are very straightforward compared to other languages, especially since you can pull up an inspector and see what went where and why. What exactly is the problem?

[Tyndmyr]

Are you looking for help or just to vent?

Because if you want help, more information on what is actually giving you trouble will be needed.



That said, I've yet to encounter any language that made designing graphical user interfaces particularly intuitive. The closest thing is stuff like Visual Basic, where you create the GUI using a GUI (yo dawg). Those tend to come with a functionality tradeoff in terms of adding useful functionality to the elements you create (or having a lot of junky inefficient code). HTML/CSS is miles easier than trying to program a GUI in Java or C++ by hand.

Totally the case. Me, I am a big fan of struts 2. However, if HTML is giving you fits, throwing more tech into the mix is unlikely to make your life easier or happier. Basic HTML isn't too bad, but you can get into some interesting territory if you need compatibility across a wide array of browsers and are doing funky stuff. What's buggin you?

[Jurai]

I'm trying to set up an eCommerce website to sell prepaid support, and I'm trying to use Dreamweaver (Free Trial, so...), and HTML, while it may be straightforward and easy to use, it's not something I can really wrap my head around straight off the bat. I'm just trying to make all my pages look similar at this point, and my links are using the same class.

[CarpeGuitarrem]

Are you designing in HTML and previewing it in Dreamweaver, or are you designing in Dreamweaver and letting it generate HTML? The latter is a massive headache; the former is the best way to use Dreamweaver.

[Jurai]

I'm using split, designing HTML and previewing in Dreamweaver, using its tools when convenient.

[Flickerdart]

The preview is basically worthless. Always preview in-browser.

[Deadline]

I'm trying to set up an eCommerce website to sell prepaid support, and I'm trying to use Dreamweaver (Free Trial, so...), and HTML, while it may be straightforward and easy to use, it's not something I can really wrap my head around straight off the bat. I'm just trying to make all my pages look similar at this point, and my links are using the same class.

So is there a problem with your links? What, specifically, is going wrong?

[Jurai]

HTML (And CSS) are being ridiculously pigheaded about tings. The layout is not to my admittedly picky tastes.

[Deadline]

HTML (And CSS) are being ridiculously pigheaded about tings. The layout is not to my admittedly picky tastes.

Do you have a code example and screen shot, or can you explain specifically what's going on? I'm not sure how to help when I only have very vague, general information. It's likely a CSS issue, not an HTML one, because HTML is really hard to actually screw up.

[Jurai]

<style type="text/css">
/*<![CDATA[*/
body {
        font: 100%/1.4 Ebrima, "Courier New", "Times New Roman";
        background-color: #000000;
        margin: 0;
        padding: 0;
        color: #FFFFFF;
}
ul, ol, dl {
        padding: 0;
        margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;
        padding-right: 15px;
        padding-left: 15px;
        font-family: 
;       font-family: Ebrima, "Courier New", "Times New Roman";
}
a img {
        /* [disabled]border: none; */
}
a:link {
        /* [disabled]color:#818285; */
        /* [disabled]text-decoration: underline; */
}
a:visited {
	/* [disabled]color: #0082CB; */
	/* [disabled]text-decoration: underline; */
}
a:hover, a:active, a:focus {
        text-decoration: none;
}
.container {
        width: 100%;
        max-width: 1260px;
        min-width: 780px;
        background-color: #000000;
        margin: 0 auto;
}
.header {
        background-color: #FFFFFF;
        margin-bottom: -5px;
}

.sidebar1 {
        float: left;
        width: 20%;
        background-color: #000;
        padding-bottom: 10px;
}
.content {
        padding: 10px 0;
        width: 80%;
        float: left;
        background-color: #000000;
}
.cardyearly {
        float: left;
        width: auto;
        backgroud-color: #FFFFFF;
}
.cardmonthly {
                float: right
        width: auto;
        background-color: #FFFFFF;
}
.content ul, .content ol { 
        padding: 0 15px 15px 40px;
}
ul.nav li {
        border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
	padding: 5px 5px 5px 15px;
	display: block;
	text-decoration: none;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
                font-family: Ebrima, "Courier New", "Times New Roman";
        font-size: 100%;
}
.footer {
        padding: 10px 0;
        background-color: #000;
        position: relative;
        clear: both;
}
.fltrt {
        float: right;
        margin-left: 8px;
}
.fltlft {
        float: left;
        margin-right: 8px;
}
.clearfloat {
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
}
body,td,th {
        color: #000000;
}
.container .header .nav li strong a {
        color: #F7931E;
}
.container .header .nav li a {
        color: #F7931E;
}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 h1.c4 {color: #F7931E}
 span.c3 {font-family: Ebrima}
 p.c2 {color: #FFFFFF}
 span.c1 {color: #F9731E}
.container .content h2 font marquee {
        color: #F7931E;
}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 h2.c1 {font-family: Ebrima}
.container .content .c1 marquee {
        color: #F7931E;
}
.content .c1 {
        color: #F7931E;
}
.Font {
        color: #FFF;
}
.content .c2 {
        color: #FFF;
}
.content p {
        color: #FFF;
}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
 li.c1 {list-style: none; display: inline}
/*]]>*/
</style>

<style type="text/css">
/*<![CDATA[*/
.content { margin-right: -1px; }
ul.nav a { zoom: 1; }
/*]]>*/
.container .nav .c1 .content .footer .c2 a .c1 strong {
        font-family: Ebrima, Courier New, Times New Roman;
}
.container .nav .c1 div h1 {
        color: #F7931E;
}
.container .nav .c1 div p {
        color: #FFF;
}
</style>
</head>
<body>
<div class="container">
<div class="header"><a href="Get-Tech-Plus.html" title="Gettechplus"><img src="Photoshop%20Work/GTP.png" width="1000.25" height="156.5" alt="GTP" /></a></div>
<ul class="nav">
<li><a href="Frequently-Asked-Questions.html"><span class="c1"><strong>Frequently Asked Questions</strong></span></a></li>
<li><a href="Group-Plans-and-Discounts.html"><span class="c1"><strong>Group Plan Pricing and Discounts</strong></span></a></li>
<li><strong><a href="Conditions-Specifications-and-Terms.html"><span class="c1">Conditions, Specifications, and Terms</span></a></strong></li>
<li><strong><a href="Return-Policy.html"><span class="c1">Return Policy</span></a></strong></li>
<li class="c1">
<div class="content">
<h1 class="c4"><span class="c3">Services</span></h1>
<p>We offer repair services for Android devices, Apple devices, Windows desktops and laptops, and handheld gaming devices.</p>
<div class=>
<p><a href="purchase-monthly-android-windows-card.html"><img src="Photoshop%20Work/Android%20and%20Windows%20Yearly%20Card%202.png" width="360" height="225" alt="Yearly Card" longdesc="Photoshop%20Work/Android%20and%20Windows%20Yearly%20Card%202.png" /></a></p>
<p><a href="purchase-yearly-android-windows-card.html"><img src="Photoshop%20Work/Android%20and%20Windows%20Monthly%20.png" width="360" height="225" alt="Monthly Card" longdesc="Photoshop%20Work/Android%20and%20Windows%20Monthly.png" /></a></p>
</div>
<div>
<p><a href="purchase-monthly-appledevice-tablets-gameconsole-card.html"><img src="Photoshop%20Work/Apple%20Yearly%20Card%202.png" alt="" width="360" height="225" /></a></p></div>
<div>
<p><a href="purchase-yearly-appledevice-tablets-gameconsole-card.html"><img src="Photoshop%20Work/Apple%20Monthly%20Card%202.png" alt="" width="360" height="225" /></a></p>
</div>

Spoiler: Image, Hu-normo-gantuan

Show

I want the cards there to be arranged in a two by two grid.

[Deadline]

Well, your auto-generated CSS is making my eyes bleed, but here's a way to float two divs next to each other (you'd take the style element out and put it in a CSS class for maintenance sake, this is just quick and dirty):

<div style="float: left; margin-right: 8px;">
<p><a href="purchase-monthly-android-windows-card.html"><img src="Photoshop%20Work/Android%20and%20Windows%20Yearly%20Card%202.png" width="360" height="225" alt="Yearly Card" longdesc="Photoshop%20Work/Android%20and%20Windows%20Yearly%20Card%202.png" /></a></p>
<p><a href="purchase-yearly-android-windows-card.html"><img src="Photoshop%20Work/Android%20and%20Windows%20Monthly%20.png" width="360" height="225" alt="Monthly Card" longdesc="Photoshop%20Work/Android%20and%20Windows%20Monthly.png" /></a></p>
</div>
<div style="float: left; margin-right: 8px;">
<p><a href="purchase-monthly-appledevice-tablets-gameconsole-card.html"><img src="Photoshop%20Work/Apple%20Yearly%20Card%202.png" alt="" width="360" height="225" /></a></p>
<p><a href="purchase-yearly-appledevice-tablets-gameconsole-card.html"><img src="Photoshop%20Work/Apple%20Monthly%20Card%202.png" alt="" width="360" height="225" /></a></p>
</div>

I'm just using the first div you had in your code that contained the paragraph tags as an indicator of what you wanted. You could also put each thing in its own div, float them all left, and make sure you put a "clear: left;" style element on the first div of each new row.

It might be important to note that floats will behave differently if the browser window shrinks (they'll pop down to one column of cards if the browser gets small enough). You can more directly control this behavior with the CSS mediaquery element (this is generally how you create a responsive design). If you just want things to go on a page in a very specific place and never move, no matter how small/large the browser window gets, you'll want to use absolute positioning, rather than floats.

[Jurai]

That's pretty much what I want, is absolute positioning.

[Deadline]

That's pretty much what I want, is relative positioning.

Relative positioning is different.

The float box model lets you have a page that flows and changes based on screen size. It's also probably the easiest to maintain. It's kind of a pain to troubleshoot though.

Absolute positioning lets you position elements absolutely with respect to the upper left corner of the browser window (i.e. no matter how big or small the browser window is, the element you position at 200 pixels to the right of the upper left corner of the browser window will always be there, even if the browser window is so small that you have to scroll to see it). This is generally not the greatest option to pursue, because it blatantly ignores a user's screen size. It's not terribly difficult to maintain, though.

Relative positioning lets you position elements "absolutely" with respect to their containing element (I think). It's quirky as heck, and a real pain to troubleshoot. You also need to be careful when repositioning stuff, because it means you might be moving elements you didn't want to move.

And table tags are for tabular data only. If you use them for page layout, you are a terrible person and should feel bad about yourself. Or go back to 1995.

Usually, if you are using a WYSIWYG tool that auto-generates html and css, those tools use absolute positioning. Which is bad when developing a web page that is going to see use from users with a variety of different screen sizes.

Edit: It's also very relevant that absolute positioning breaks the float box model, so trying to use them both in the same page will only end in tears.

For a very simple example of using the float model to do what you want:

<html>
     <head>
          <style>
               .floatLeft
               {
                    float: left;
               }
               .floatLeft1stColumn
               {
                    clear: left;
                    margin-right: 8px;
                    margin-bottom: 8px;
                    background-color: green;
               }
               .floatLeft2ndColumn
               {
                    margin-right: 8px;
                    margin-bottom: 8px;
                    background-color: red;
               }
          </style>
     </head>
     <body>
          <div class="floatLeft floatLeft1stColumn">two things
          </div>
          <div class="floatLeft floatLeft2ndColumn">two other things
          </div>
          <div class="floatLeft floatLeft1stColumn">another thing
          </div>
     </body>
</html>

[Jurai]

I see. Do you know of any editors that are good for Relative positioning?

[Deadline]

I see. Do you know of any editors that are good for Relative positioning?

Not really, you kind of have to do Relative Positioning by hand. Auto-generated code with Dreamweaver and similar tools will almost certainly give you Absolute Positioning. I haven't spotted a tool that creates auto-generated code using the float box model.

[valadil]

The great thing about web design is that you can cheat. If you see something on another site and want to know how it works, right click and hit view source. Better yet, use your browser's dev tools (usually f12) to help navigate the source and css.

I'm not advocating stealing. Just taking apart sites so you can use their techniques when building your own. If you want a two by two grid that deforms into a one by four for smaller screens, you might find a bunch of boxes with a set width inside another box with a set width. The width business makes sense, but what's this "float" css doing? Go read up on floats and then you'll be able to use them on your own site. (Hint: read up on floats now, don't wait till you bump into them in the wild.)

[shawnhcorey]

That's pretty much what I want, is absolute positioning.

You can't do absolute positioning on web pages. If you try, it's going to look crappy. This is the biggest difference between GUI design and web design.

[factotum]

Guys, you realise the thread is three and a half months old and was necromanced by a spambot, right?